Vertical Menu Bar with custom positioning

Question

I am working on a site that uses the very old mm_menu script. It is a PITA to maintain and modify. However, it allows on thing I have been unable to accomplish with Spry Vertical Menu -- the second level menus appear in the same vertical space as the first level menu. The normal operation for such menus is for the second level to start more or less with the vertical position of the first level button. But this means the second level often drops far below the bottom of the lowest first level button.
Does anyone know of a way to customize where each second level appears (third and fourth are not needed)? Or some other UL/LI based menu code that can do this?

Answer 1

Hi Bob,
My first suggestion would be to re-order your navigation list to avoid the problem in the first place or figure out a different design altogether.  By re-ordering, I mean place menu items with the largest submenu at the top, and those with the smallest at the bottom.  Of course I understand there may be reasons not to do this, so here is what you can do to control where the menu positions itself.  The vertical positioning is controlled by "position: absolute;" style in all <ul>s contained within a <ul class='MenuBarVertical'>.  When you position something with absolute, it looks for its nearest parent that is positioned relatively (in this case the <li> items within <ul class='MenuBarVertical'>).  from there you can designate pixels or ems to offset from the top or bottom of the parent.  so an example of a way to do this is below.
to give your menu the most control, you can assign each submenu its own class and decide its vertical positioning.
     your current html/css is something like:
    <style>
     ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          top: 0;   /* <-------this is what you will change for each submenu */
     </style>
so to change this you could assign a class name to each submenu to look something like this
<ul class='MenuBarVertical'>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 1</a>
          <ul class='item_1'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 2</a>
          <ul class='item_2'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 3</a>
          <ul class='item_3'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
     <li>
          <a href='#' class='MenuBarItemSubmenu'>Item 4</a>
          <ul class='item_4'>
               <li>sub1</li>
               <li>sub2</li>
               <li>sub3</li>
          </ul>
     </li>
</ul>
and extend the class styling to control each menu's vertical position.  "top:0;" is what is default and aligns the top of the submenu with the top of its parent <li>.  Giving it a negative number would move the submenu up and a positive number would move it down (can be in pixels, ems, etc.).  You can also use "bottom:0;" to align the bottom of the submenu with the bottom of its parent <li>.  Giving it a negative number would move the submenu down, and a positive number would move it up.  So using the above menu/list format you could position each submenu exactly where you want to:
<style>
     ul.MenuBarVertical ul
          margin: -5% 0 0 95%;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: absolute;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          left: -1000em;
          /* top: 0;  <-------comment this out or remove it.  we will set the position for each menu*/
     ul.MenuBarVertical ul.item_1
          top: 0;
     ul.MenuBarVertical ul.item_2
          top: -30px;
     ul.MenuBarVertical ul.item_3
          bottom: -2em;
     ul.MenuBarVertical ul.item_4
          bottom: 0;
     </style>
Of course there are other ways to do this, but the lesson to remember is how absolute positioning works.  It looks for its nearest relatively positioned element and positions itself from that using top/bottom/left/right.  I hope this gives you a workable solution or at least gets you moving in the right direction.
Dan