PDA

View Full Version : Horizontal css menus



cherieom
Sep 16th, 2010, 01:04 AM
I have been asked to make a horizontal menu but without drop downs they want the links to appear under the menu. Does anyone know of any good tutorials for this or what the style of menu is called? Thanks.

Pepineros
Sep 16th, 2010, 01:23 AM
Firstly, although I think you figured this one out yourself, don't use any of the 'create your own drop-down menu' nonsense. There are several good tutorials out there for this kind of thing, and they work splendidly in most browsers with only xhtml and css. IE usually requires some JavaScript, since in IE, the :hover tag can only be used on anchor elements. Here's the (simplified) code I use for a dropdown menu in one of my designs, but there are no comments in it so either read carefully or find a good tutorial for this :)

HTML:

<html>

<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

<body>

<ul class="navigation">
<li class="main"><i>menu-item 1</i>
<ul>
<li><a href="">sub 1-1</a></li>
<li><a href="">sub 1-2</a></li>
</ul>
</li>
<li class="main"><i>menu-item 2</i>
<ul>
<li><a href="">sub 2-1</a></li>
<li><a href="">sub 2-2</a></li>
<li><a href="">sub 2-3</a></li>
<li><a href="">sub 2-4</a></li>
</ul>
</li>
<li class="main"><i>menu-item 3</i>
<ul>
<li><a href="">sub 3-1</a></li>
<li><a href="">sub 3-2</a></li>
<li><a href="">sub 3-3</a></li>
</ul>
</li>
</ul>

</body>
</html>

CSS:

ul { margin:0; padding:0; }
li { background-color:black; list-style-type:none; }
ul li ul { display:none; position:absolute; }
ul li:hover ul { display:block; }
ul li:hover ul a { background-color:black; color:white; padding-left:2px; padding-right:120px; }
ul li ul a:hover { color:grey; }
.navigation { width:48%; margin:0px auto; margin-top:2%; color:white; font-family:calibri,sans-serif; font-size:15pt; }
.navigation a { color:white; text-decoration:none; }
.main { float:left; width:23%; display:block; padding-left:10%; }

It's probably not the most efficient way to do it, but it works. You can of course add any kind of other layout to this; the basic black and white I used is rather boring.

cherieom
Sep 16th, 2010, 08:09 AM
I was wondering I wasn't after drop downs but more if the drop downs could be displayed horizontally underneath the 'top menu'.

hitek
Sep 16th, 2010, 08:12 AM
Here (http://websitetips.com/css/tutorials/menus/) is a good tutorial article. It also has good examples.