This is an example of the YUI AccordionView widget in action. This widget was created by Marco van Hylckama Vlieg. All code is licensed under the BSD license.
This is an example of how to use the AccordionView widget as a menu which includes submenus as well as items that don't have a submenu but a single link instead. To accomplish this from markup, give the LI element you want to be a link without a corresponding panel the class nopanel and add only a link for it's content.
For the submenu, the default CSS file contains some pre-made styles. To use them, use an unordered list with class submenu as the content for your panel.
<ul id="mymenu"> <li><h3>Web Development</h3> <div> <ul class="submenu"> <li><a href="http://www.thinkvitamin.com/">Vitamin</a></li> <li><a href="http://www.zeldman.com/">Jeffrey Zeldman</a></li> <li><a href="http://www.wait-till-i.com/">Christian Heilmann</a></li> <li><a href="http://www.456bereastreet.com/">Roger Johansson</a></li> <li><a href="http://developer.yahoo.net/">Yahoo! Developer Network</a></li> <li><a href="http://www.kid666.com/blog/">Tom Hughes-Croucher</a></li> <li><a href="http://www.phpied.com/">Stoyan Stefanov</a></li> <li><a href="http://snook.ca">Jonathan Snook</a></li> <li><a href="http://www.i-marco.nl/weblog/">Marco van Hylckama Vlieg</a></li> </ul> </div> </li> <li class="nopanel"> <a href="http://www.apple.com/">Apple Computer</a> </li> <li><h3>Design</h3> <div> <ul class="submenu"> <li><a href="http://www.shauninman.com/">Shaun Inman</a></li> <li><a href="http://feeds.feedburner.com/">John Hicks</a></li> <li><a href="http://veerle.duoh.be/">Veerle Pieters</a></li> <li><a href="http://www.cameronmoll.com/">Cameron Moll</a></li> <li><a href="http://www.jasonsantamaria.com/">Jason Santa Maria</a></li> <li><a href="http://www.markboulton.co.uk/">Mark Boulton</a></li> <li><a href="http://www.subtraction.com/">Khoi Vinh</a></li> <li><a href="http://www.andyrutledge.com/">Andy Rutledge</a></li> </ul> </div> </li> <li><h3>Gadgets and Photography</h3> <div> <ul class="submenu"> <li><a href="http://www.engadget.com/">Engadget</a></li> <li><a href="http://www.gizmodo.com/">Gizmodo</a></li> <li><a href="http://www.dpreview.com/">DP Review</a></li> <li><a href="http://www.kenrockwell.com/">Ken Rockwell</a></li> <li><a href="http://www.macrumors.com/">Mac Rumors</a></li> <li><a href="www.ubergizmo.com/">Uber Gizmo</a></li> <li><a href="http://news.cnet.com/crave/">Crave</a></li> </ul> </div> </li> </ul>
var menu1 = new YAHOO.widget.AccordionView('mymenu', {collapsible: true, expandable: false, width: '240px', animate: true, animationSpeed: '0.5'});
To dynamically add a link-only item from script, use 'SINGLE_LINK' as value for label and use the link itself as value for content.
menu1.addPanel({label: 'SINGLE_LINK', content: '<a href="http://www.yahoo.com/">Yahoo!</a>'});
Or, to put it at a certain preset position in the list, add an index:
menu1.addPanel({label: 'SINGLE_LINK', content: '<a href="http://www.yahoo.com/">Yahoo!</a>'}, 1);
The latter is used in this example.