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:
- #bar {cursor:pointer; height:30px; white-space:nowrap;}
- #menu {height:30px; padding:0 0 0 10px; position:relative; z-index:1000;}
- #menu ul {list-style:none; margin:0; padding:0;}
- #menu ul li {display:inline-block;}
- #menu ul li a {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
- #menu ul li span {display:block; padding:0 15px; line-height:30px; text-decoration:none;}
- #menu ul li div.container {left:-9999px; padding:5px; position:absolute;}
- #menu ul li:hover {position:relative;}
- #menu ul li a:hover {position:relative;}
- #menu ul li a.submenu:hover {position:relative;}
- #menu ul li span:hover {position:relative;}
- #menu ul li span.submenu:hover {position:relative;}
- #menu ul li:hover > a {position:relative;}
- #menu ul li:hover a.submenu {position:relative;}
- #menu ul li:hover > span {position:relative;}
- #menu ul li:hover span.submenu {position:relative;}
- #menu ul :hover div.container {left:0px; position:absolute; top:30px;}
- #menu ul dl {list-style:none; margin:0; padding:0; width:auto;}
- #menu ul dl dt {margin:5px 0 0 0; padding:2px;}
- #menu ul dl dd {display:block; margin:0; padding:2px;}
- #menu ul dd a {display:block; font-weight:normal; margin:0; padding:0 10px; text-align:left;}
The HTML:
- <div class=ui-widget" id="bar">
- <div class="ui-widget-header" id="menu">
- <ul>
- <li>
- <a href="/index.php">Home</a>
- </li>
- <li>
- <span class="submenu">Your Account</span>
- <div class="container ui-widget-content ui-corner-bottom">
- <dl class="ui-widget">
- <dd>
- <a id="item_1" href="/profile.php">Your Profile</a>
- </dd>
- <dd>
- <a id="item_2" href="/password.php">Change Your Password</a>
- </dd>
- </dl>
- </div>
- </li>
- </ul>
- </div>
- </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.