Pop Out CSS Menu
Written by David Appleyard, On 11th July 2007.
Filed in Articles, CSS, Navigation.
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
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!
Tags: CSS, drop, dropdown, hierarchy, menu, Navigation
does this work with screen readers??
I applied this CSS for a dinamic menu from PHP+MySQL.. It works very well … Thanks…