Creating A Simple Horizontal Menu Using Css

Mystixs · January 27, 2007

Hello!

This tutorial will teach you how to make a simple Horizontal Menu using CSS.
For a demo of what it looks like visit: /legacy

Anyway, enough of this, lets get started on the tutorial.

First lets add the HTML part of the menu.

<html><head></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Downloads</a></li><li><a href="#">Links</a></li></ul></div></body></html>

What this does is setup the VERY basic look of the navigation. It has 5 links, each link goes nowhere. You have to specify were it goes yourself.
Now the "div id" stuff identifys the menu so the CSS will work.

Now, lets add the first part of the CSS.

<html><head><style type="text/css">#navigation 	  {   			list-style: none;   			margin: 0;   			padding: 0;			}</style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Downloads</a></li><li><a href="#">Links</a></li></ul></div></body></html>

This CSS code just specifys the basic layout of the navigation.
Lets add the second and third parts of the CSS.

<html><head><style type="text/css">#navigation 	  {   			list-style: none;   			margin: 0;   			padding: 0;			}#navigation li 	  {   			float: left;			}#navigation li a  {   			display: block;   			background: #3366AA;   			width: 179px;   			text-align: center;   			color: white;   			padding: 3px 0;			}</style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Downloads</a></li><li><a href="#">Links</a></li></ul></div></body></html>

The "#navigation li" tells that the links inside <li> and </li> tags to float to the left. If you changed "float: left;" to "float: center;" it would not be a horizontal navigation. It would be a vertical CSS menu.

The "#navigation li a" tells the general look of the navigation. The code "display: block;" makes it so the menu is in blocks.
The Background tells the background color of the menu.
The width specifys how wide each button is.
Text align center tells it to align the text center.
The color tells what color the text will be.

Now add the final CSS.

<html><head><style type="text/css">#navigation 	  {   			list-style: none;   			margin: 0;   			padding: 0;			}#navigation li 	  {   			float: left;			}#navigation li a  {   			display: block;   			background: #3366AA;   			width: 179px;   			text-align: center;   			color: white;   			padding: 3px 0;			}#navigation li a:hover 	{   			background: #6699CC;   			border-type: solid;   			border-color: white;   			color: white;			}</style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Downloads</a></li><li><a href="#">Links</a></li></ul></div></body></html>

Autumn · February 5, 2007

Well done.I'm sure most people now are moving on to the graphical menus that they can create in photoshop and just slice up, but it's always nice to see someone code their own.I like to do that, although I have to admit, my latest site has a graphical menu. The look of it is just more filling for the site.Nice job, though!

matak · February 5, 2007

If you want to add graphic to this menu you could do it like this

#navigation li a  {			   display: block;			   background: url(path/to/image) top right no-repeat;			   width: 179px;			   text-align: center;			   color: white;			   padding: 3px 0;			}#navigation li a:hover	 {			   background: url(path/to/image_hover) top right no-repeat;			   border-type: solid;			   border-color: white;			   color: white;			}

I haven't tested it but it should work... You need to be smart when creating images. This images are aligned top right, so make them "top right" images (search for sliding doors technique)

Autumn · February 5, 2007

Theoretically, it should work.There might be a complication with Internet Explorer, but that's expected when using code like that. I figure by using a completely graphical menu, you save the risk of browser complications.

DjLuki · February 5, 2007

how would you go about if you wanted to add submenus to this navigation? i'm trying to make one but i can only get the menu like this one, except my code is a bit different, im not using the list tags.. what i mean by submenus is when you hover over a button, the other buttons/links drop down below. i have look at many codes for this but i don't understand any of them.

jlhaslip · February 5, 2007

Go to http://www.cssplay.co.uk/ and look at the Menu demos they have. Most of them are cross-browser and standards compliant. Pick one you like and after reading the author's comments, (some of the menus are restricted), do a view > siurce and copy the code into your page.

It helps to have the knowledge of css and html to do this, though. If you need help, start a topic in the html/css sub-forum.

DjLuki · February 5, 2007

yea i have already been to that site and have tired their codes but it messed up the one i have..i already haev a topic started but people are only giving me links, which i can't seem to get these codes to work with mine.. i will post mine up and see if anyone can help me.

Autumn · February 5, 2007

You could try:http://apycom.com/
If you wanted to do your own, you'd need a fair bit knowledge on HTML/CSS and JavaScript. I'm sure they can be completely scripted without Java, but it might be a little easier to use a bit of it.I used to like menus like that, but I find that sometimes they're just annoying. I'll probably end up using one again soon on my newer designs. We'll see how it goes!

DjLuki · February 5, 2007

yea, i know html, not an expert but i can make a horizontal bar, and i know some css, but not enough to apply this waht i want.. and i don't like those javascript, where you have to click to see the submenus.. i want them to show up automatically when you hover.. i was going to put up my code but somebody closed my topic.

Autumn · February 6, 2007

You'd have to style it to automatically drop down. MouseOver should do it, I'd think.

Example:

onMouseOver =

etc...

I'm not 100% sure how to do it, exactly so I don't think I could be beneficial to you. I used to know most of it. Perhaps reading up on a tutorial or two will help. I'll PM you if I find one.

FLaKes · February 6, 2007

You should check out the so called "sons of suckerfish dropdown menu". Here is the link for the tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/

Here is a quick example for it:
http://forums.xisto.com/no_longer_exists/

The only downside to this menu is that it needs a javascript file because Internet exploiter is unable to hover anything else thats not an <a> element.

Let me know if you need any help with them, I have lots of experience with them.

Also if you need a graphical menu in css and you want to avoid the flickering Internet exploiter causes you should consider using the css navigational matrix menu, there is a really good tutorial in this other link:

http://forums.xisto.com/no_longer_exists/

I hope it helps, and as I said a while ago, feel free to contact me if you need any help.

Mystixs · February 6, 2007

Oh, wow. I didn't notice this ever got posted... Sorry.Now, seems everyone is helping him, but if you still have troubles I will try to make one with no or very little javascript for you.Also, thanks for the comments. Been busy lately and haven't been able to get on the forums lately.But, I am trying to come back

jlhaslip · February 6, 2007

I suggest modding the original code to place the list-style: none on the <li> element because with it placed on the ul, it displayed the bullets on the individual elements, but when used as an attribute on the <li>'s, they bullets went away. This might be a Browser specific behaviour, though. I don't know...

#navigation li	   {			   float: left;			   list-style: none;			}

Sign In

Creating A Simple Horizontal Menu Using Css

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information