Markup for a hierarchical YUI Menu


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <div id="productsandservices" class="yuimenu">
  2. <div class="bd">
  3. <ul class="first-of-type">
  4. <li class="yuimenuitem">
  5. <a class="yuimenuitemlabel" href="#communication">
  6. Communication
  7. </a>
  8. <!-- A submenu -->
  9. <div id="communication" class="yuimenu">
  10. <div class="bd">
  11. <ul>
  12. <!-- Items for the submenu go here -->
  13. </ul>
  14. </div>
  15. </div>
  16. </li>
  17. <li class="yuimenuitem">
  18. <a class="yuimenuitemlabel" href="http://shopping.yahoo.com">
  19. Shopping
  20. </a>
  21. <!-- A submenu -->
  22. <div id="shopping" class="yuimenu">
  23. <div class="bd">
  24. <ul>
  25. <!-- Items for the submenu go here -->
  26. </ul>
  27. </div>
  28. </div>
  29. </li>
  30. <li class="yuimenuitem">
  31. <a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">
  32. Entertainment
  33. </a>
  34. <!-- A submenu -->
  35. <div id="entertainment" class="yuimenu">
  36. <div class="bd">
  37. <ul>
  38. <!-- Items for the submenu go here -->
  39. </ul>
  40. </div>
  41. </div>
  42. </li>
  43. <li class="yuimenuitem">
  44. <a class="yuimenuitemlabel" href="#information">
  45. Information
  46. </a>
  47. <!-- A submenu -->
  48. <div id="information" class="yuimenu">
  49. <div class="bd">
  50. <ul>
  51. <!-- Items for the submenu go here -->
  52. </ul>
  53. </div>
  54. </div>
  55. </li>
  56. </ul>
  57. </div>
  58. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.