When using the jQuery.mmenu plugin, you're not restricted to using a standard markup with UL
, LI
and A
elements.
So instead lets start with a panel (DIV
) and put some HTML in it, for example an IMG
and a P
.
<div> <img src="paht/to/logo.png" /> <p>Welcome to the advanced menu.</p> </div>
Wrap the panel (DIV
) in a node (most commonly a NAV
element) and give that node an ID
:
<nav id="my-menu"> <div> <img src="paht/to/logo.png" /> <p>Welcome to the advanced menu.</p> </div> </nav>
You can create a subpanel by putting another DIV
in the first DIV
,
give the second DIV
the class "Panel"
and an ID
and link to it from the first DIV
.
<nav id="my-menu"> <div> <img src="paht/to/logo.png" /> <p>Welcome to the advanced menu.<br /> <a href="#subpanel">Open the second panel</a></p> <!-- subpanel --> <div id="subpanel" class="Panel"> <p>This is the subpanel.</p> </div> </div> </nav>
Alternatively, you can put the second DIV
in the NAV
,
now the second DIV
does not need the class "Panel"
.
<nav id="my-menu"> <div> <img src="paht/to/logo.png" /> <p>Welcome to the advanced menu.<br /> <a href="#subpanel">Open the second panel</a></p> </div> <div id="subpanel"> <p>This is the subpanel.</p> </div> </nav>
Next up:
Styling lists