Creating A Simple Horizontal Menu Using Css

Mystixs

Jan 27 2007, 03:08 AM

Hello!

This tutorial will teach you how to make a simple Horizontal Menu using CSS.
For a demo of what it looks like visit: http://chesspieces.byethost9.com/Dragon%20Designs/

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

First lets add the HTML part of the menu.

CODE

<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.

CODE

<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.

CODE

<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.

CODE

<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>

Comment/Reply (w/o sign-up)

AutumnDesigns

Feb 5 2007, 05:34 AM

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!

Comment/Reply (w/o sign-up)

matak

Feb 5 2007, 06:12 AM

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

CODE

#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)

Comment/Reply (w/o sign-up)

AutumnDesigns

Feb 5 2007, 08:27 PM

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.

Comment/Reply (w/o sign-up)

DjLuki

Feb 5 2007, 09:56 PM

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.

Comment/Reply (w/o sign-up)

jlhaslip

Feb 5 2007, 10:09 PM

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.

Comment/Reply (w/o sign-up)

DjLuki

Feb 5 2007, 10:15 PM

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.

Comment/Reply (w/o sign-up)

AutumnDesigns

Feb 5 2007, 10:32 PM

You could try:

www.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!

Comment/Reply (w/o sign-up)

DjLuki

Feb 5 2007, 10:54 PM

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.

Comment/Reply (w/o sign-up)

Autumn

Feb 6 2007, 02:14 AM

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

Example:

CODE

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.

Comment/Reply (w/o sign-up)

Latest Entries

jlhaslip

Feb 6 2007, 09:34 PM

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...

CODE

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

Comment/Reply (w/o sign-up)

Mystixs

Feb 6 2007, 04:54 PM

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

Comment/Reply (w/o sign-up)