A selection of css horizontal and vertical menus

The five menus with expainations & css details

Preamble

While updating the menu on this site, I experimented with quite a few different css menu types. Along the way I put together various menus, which I've uploaded and added for anyone who cares to use them. In the end we ended up with a simpler 2 tier version of our original 3 tier menu, which I'll add at a later date.

Menu one uses no images and is purely a css construct. Menu two makes use of the opacity css command, menu three is a glimpse of the future with some css3 features and the last two menus utilise the image rollover or sliding doors effect.

The horizontal menu html

If you want to have a one colour/image menu the html markup is as follows :

<ul id="menu_h">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav1"><a href="menu2.html">Menu Two</a></li>
<li class="nav1"><a href="menu3.html">Menu Three</a></li>
<li class="nav1"><a href="menu4.html">Menu Four</a></li>
<li class="nav1"><a href="menu5.html">Menu Five</a></li>
</ul>

The vertical menu html

<ul id="menu_v">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav1"><a href="menu2.html">Menu Two</a></li>
<li class="nav1"><a href="menu3.html">Menu Three</a></li>
<li class="nav1"><a href="menu4.html">Menu Four</a></li>
<li class="nav1"><a href="menu5.html">Menu Five</a></li>
</ul>

Using different colours/images for each section

If you want to have a different colour/image for each section of the menu the html markup (horizontal menu) is as follows :

<ul id="menu_h">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav2"><a href="menu2.html">Menu Two</a></li>
<li class="nav3"><a href="menu3.html">Menu Three</a></li>
<li class="nav4"><a href="menu4.html">Menu Four</a></li>
<li class="nav5"><a href="menu5.html">Menu Five</a></li>
</ul>

Then add a new class for .nav2, .nav3, etc in the css file, specifying your new colour/image for that class.

The css

The css will vary slightly for all 5 menus, but has the same basic structure. To use the css, copy and paste the code on the following pages into an html editor and save with a .css extension.

Then add a line like the one below in the <head>...</head> section of the html :

<link rel="stylesheet" type="text/css" media="all" href="new_menu.css" />

If you want to edit the css in the same html page you are working on, copy it into the html between these :

<style type="text/css">
css code goes here
</style>

again this is placed in the <head>...</head> section of the html.