Advanced Search

Markup for a hierarchical YUI Menu

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

Expand | Embed | Plain Text

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.