The menu

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 it in a node

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>

Subpanels

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