Menu for 1.8.x...

Menu for 1.8.x...

While we are all waiting for the new menu widget to be released in 1.9, here is a temporary menu that will work in 1.8 that works with ThemeRoller...

The CSS:

  1. #bar {cursor:pointer; height:30px; white-space:nowrap;}
  2. #menu {height:30px; padding:0 0 0 10px; position:relative; z-index:1000;}
  3. #menu ul {list-style:none; margin:0; padding:0;}
  4. #menu ul li {display:inline-block;}
  5. #menu ul li a {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
  6. #menu ul li span {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
  7. #menu ul li div.container {left:-9999px; padding:5px; position:absolute;}
  8. #menu ul li:hover {position:relative;}
  9. #menu ul li a:hover {position:relative;}
  10. #menu ul li a.submenu:hover {position:relative;}
  11. #menu ul li span:hover {position:relative;}
  12. #menu ul li span.submenu:hover {position:relative;}
  13. #menu ul li:hover > a {position:relative;}
  14. #menu ul li:hover a.submenu {position:relative;}
  15. #menu ul li:hover > span {position:relative;}
  16. #menu ul li:hover span.submenu {position:relative;}
  17. #menu ul :hover div.container {left:0px; position:absolute; top:30px;}
  18. #menu ul dl {list-style:none; margin:0; padding:0; width:auto;}
  19. #menu ul dl dt {margin:5px 0 0 0; padding:2px;}
  20. #menu ul dl dd {display:block; margin:0; padding:2px;}
  21. #menu ul dd a {display:block; font-weight:normal; margin:0; padding:0 10px; text-align:left;}

The HTML:

  1. <div class=ui-widget" id="bar">
  2.       <div class="ui-widget-header" id="menu">
  3.             <ul>
  4.                   <li>
  5.                         <a href="/index.php">Home</a>
  6.                   </li>
  7.                   <li>
  8.                         <span class="submenu">Your Account</span>
  9.                         <div class="container ui-widget-content ui-corner-bottom">
  10.                               <dl class="ui-widget">
  11.                                     <dd>
  12.                                           <a id="item_1" href="/profile.php">Your Profile</a>
  13.                                     </dd>
  14.                                     <dd>
  15.                                           <a id="item_2" href="/password.php">Change Your Password</a>
  16.                                     </dd>
  17.                               </dl>
  18.                         </div>
  19.                   </li>
  20.             </ul>
  21.       </div>
  22. </div>

Run $('#item_N').button(); on all the menu items where "item_N" is the actual item id like item_1, item_2, and so on...  the above demonstrates a menu bar with 2 top level items, one clickable (Home) and for the other one (Your Account) when you mouse over it will produce a drop down with 2 items in it.  You can use the <dt> instead of <dd> tag to have non-clickable menu items in the drop down for whatever reason.

And voila... you've got a simple themeable drop down menu bar.  Not very pretty, but it works and should hold you over until 1.9 comes out!

I hope this helps someone.  Apologies for any error in the code - I typed it directly into this post.