Pop Out CSS Menu
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.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div id="menu"> <ul> <li><h2>Navigation Menu</h2> <ul> <li><a href="" title="">Option 1</a> <ul> <li><a href="" title="">Sub Option 1</a></li> <li><a href="" title="">Sub Option 2</a></li> <li><a href="" title="">Sub Option 3</a></li> </ul> </li> </ul> <ul> <li><a href="" title="">Option 2</a> <ul> <li><a href="" title="">Sub Option 1</a></li> <li><a href="" title="">Sub Option 2</a></li> <li><a href="" title="">Sub Option 3</a></li> </ul> </li> </ul> <ul> <li><a href="" title="">Option 3</a> <ul> <li><a href="" title="">Sub Option 1</a></li> <li><a href="" title="">Sub Option 2</a></li> <li><a href="" title="">Sub Option 3</a></li> </ul> </li> </ul> </li> </ul> </div> |
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!