Design Shack — Web Design Gallery, Articles & Community

For websites with a complex hierarchy of navigation, using a pop out menu can allow you to easily find your way to what you want quickly. Using CSS to create one is a snap, and is easy to update.

Example

View the Pop Out Menu Example

This is a simple menu, coded semantically with XHTML and CSS. It uses a list to show the menu, and generates the layout of the links from the CSS file. You will need to download our style sheet, download the whatever:hover file from Peter Nederlof to get the menu working in Internet Explorer. You add the following HTML to your code, altering it to fit your needs:

HTML Code

  
Navigation Menu
    

      
Option 1
        

          
Sub Option 1
          
Sub Option 2
          
Sub Option 3
        
      
    
    

      
Option 2
        

          
Sub Option 1
          
Sub Option 2
          
Sub Option 3
        
      
    
    

      
Option 3
        

          
Sub Option 1
          
Sub Option 2
          
Sub Option 3
        
      
    
  
				

CSS Code

You can download a copy of the CSS code for this example, then copy and paste it into the head section of your page. Combine that with the whatever:hover file from above in the same directory, and the detailed HTML code – you’ll have a beautiful popup menu in no time!