When it comes to creating a menu for your site one of the easiest ways is to use a simple unordered list as your (x)HTML structure and then style it using css. With the right styling you can even achieve some creative effects Let’s get right into the code and build a simple menu.
(x)HTML List
The structure of the menu is just an unordered list with links inside each of the list items.
[code type=html]
[/code]
Nothing really exceptional to this list. You would naturally add real URLs to your pages inside the href attribute. The only thing I added was an id of ‘list-menu’ just so we can refer to the menu later. The code as we have it now will look like:
Styling The Menu With CSS
The (x)HTML only menu is certainly workable and I’ve used something as simple in sites before. What we’re after here is a little something more so let’s dress it up a little with some css.
One issue you may come across with lists is where that indent in the list comes from. Firefox and IE indent the list using a different css property. In Firefox it’s the padding that indents the list and in IE it’s the margin. The easiest way to get them both in line with each other is to set both margin and padding to 0. From there I like to add back some margin to get the menu where I want. Let’s also turn off the bullets since we won’t be using them here and let’s give the menu a width. We’ll let the height take care of itself.
[code type=css]
ul#list-menu {
margin:20px;
padding:0;
list-style:none;
width:150px;
}
[/code]
For the links we’ll take out the underline and give them a little padding, a text color, and background color. The most important thing we need to add to the links is to get them to work the way we want is display:block. Setting the display property of the links to block will get each to expand to fill their container, in this case the list items, instead of just being the size of just the anchor text.
[code type=css]
ul#list-menu li a {
text-decoration:none;
display:block;
padding:5px;
width:140px;
background:#485e49;
color:#eee
}
[/code]
I’ve set the css to act on ul#list-menu li a. The li isn’t really needed and the css could also have been applied to ul#list-menu a or even just #list-menu a, but I used the longer form to be more specific when it comes to cascading rules. It’s not something that will be important here, but it can be depending on how complex the css for the rest of your page gets.
The two main things to pay attention to with the css above is the display:block which is what will really make the whole structure work. It’s what will make the link fill up the entire list item so anywhere we place our mouse will be a link instead of just the text. It’s easy to test this by taking the display:block out of the code and see how the menu looks. The other thing to pay attention to is the width. The width of the links is a little less than the overall list to account for the 5px padding on the left and right of the link. Adding the width to the links also fixes a problem with IE in the vertical spacing of the links within the list.
As we currently have it coded our menu should now look like the following:
It’s getting there, but we can still make it look a little nicer and give it some kind of rollover effect.
Final Touches
For a little extra style let’s give the menu and the individual links a border so they stand apart from each other a little more. We’ll do this is by adding a 2px border to the <ul> with the exception of the top which will only be 1px. We’ll then give the links a 1px top border. The 1px less on the overall list gets accounted for with the 1px border of the first link. The rollover effect can be kept simple as well. We’ll just change the color of the anchor text and also the background color. Here’s the new css:
[code type=css]
ul#list-menu {
border:solid #668265;
border-width:1px 2px 2px 2px;
}
ul#list-menu li a {
border-top:1px solid #77a487;
}
ul#list-menu li a:hover {
background:#a2b3a1;
color:#000
}
[/code]
For the menu I’ve used the border shortcut property for the style and color of the border and specified the widths with the border-width property since we want to use different widths. Since the border on the links is only on one side I just used the shortcut. Just as with the link I also used the specific selector when referring to the hover on the link. We now have our final menu which should look like:
Nothing to it. With just a very simple list structure and not so complicated css we have a pretty decent looking menu. With a little more css you could easily style the list more and achieve some interesting effects. For an example take a look at Office Support 911 which is a site I recently designed and developed. The menu on the site adds a couple of images for the handle of the file cabinet and a little javascript to make it all work in IE, but at it’s core it’s nothing more than a styled list.
Complete Menu (x)HTML And CSS
The complete code for our simple menu is:
[code type=html]
[/code]
[code type=css]
ul#list-menu {
list-style:none;
margin:20px;
padding:0;
border:solid #668265;
border-width:1px 2px 2px 2px;
width:150px
}
ul#list-menu li a {
text-decoration:none;
display:block;
border-top:1px solid #77a487;
padding:5px;
background:#485e49;
color:#eee
}
ul#list-menu li a:hover {
background:#a2b3a1;
color:#000
}
[/code]
I hope you’ve seen how easy it is to create a simple menu. Lists can also be used to create horizontal navigation and by nesting lists with just a pinch of JavaScript you can create some nice dynamic drop down menus. So the next time you build a menu for a site use an HTML list structure, some css styling, and a little of your own creativity for some nice effects that will be much easier to code than they look.
Download a free sample from my book, Design Fundamentals.
please i would like to know more about the designing of website especially the way how you designs the dropdown menu using some codes from html because i fing it some difficult that is only my request.
My apologies kaloba haron. For some reason your comment didn’t go through initially or perhaps I accidentally deleted. Either way please accept my apology.
I’ve been using the suckerfish code when I need drop down menus. I think it’s pretty easy to use, though you may need to spend a little time looking at the code to understand what it’s doing. The system is also very lightweight and validates.
I hope that helps.
steven do you know where i can get a template for a easy temple plate for a recipe site all i want is something that i can add the name of a recipe and then click on that name to go to the recipe do u have ant ideas where i can get this templte for my site please any help would be apprecated
I don’t know of any off the top of my head, but I would think recipe site templates or themes would exist. You might need to search around a little and accept that what’s available isn’t exactly what you want, but you should be able to find something at least close to what you’re looking for.
Example CSS doesn’t look so great in IE7. I noticed that your own CSS to make the example work doesn’t match the example given.
I’ll have to take a look. In all fairness to me though, this post was written long before there was an IE7 so it was kind of hard to test in it at the time.
Thanks for pointing it out. It’s probably (hopefully) something minor that I can tweak.
The only difference between the css code as presented and the actual css used in the example should all be for formatting within this post and so as not to conflict with the rest of the css for the site.
Thanks again for pointing it out. This post is a couple years old now and can probably use some updating.
Your menu is awesome.
So great simple and useful.
Thank you so much
I love it this is what i was looking for .
Thanks Behzad. I’m glad you found the menu helpful and easy to use. I appreciate the compliment too.
I don’t always succeed, but I do try to keep things simple.
question can you make a css header or footer or sidebar appear on all of your web pages or is it better to do a php include with a header php file.
let me know thanks
trying to figure out the best way to do this.
thank you.
Scott
Scott the best way is to use the include file. It doesn’t have to be php, of course. You can use any server side language. Just about anything that’s going to consistently repeat from page to page across your site (header, footer, sidebar) is best to keep in a separate file and then use php (or other) to include the file on the page.
It makes maintaing your site much easier.
Also keep your css and javascript in their own external files. The more modular you make your site the happier you’ll be when it comes time to change something.
I was just wondering about this myself..
I guess for now (as I haven’t learned everything yet!) ill have to copy/paste my top header/banner and its navbar + side menu on every page.
One step at a time!
You could do that, but it’s pretty easy to use a php include. Here’s a good article showing you how. Give that a try before copying and pasting. Copy/paste will work if your site only has a few pages, but once you get past a few pages, it quickly becomes a pain to make changes and maintain.
ok excellent, thank you, I really appreciate the help.
just to make sure on one point though, their is no CSS include script to appear on all your web pages you have. Correct (besides sprites).. I can’t use CSS solely to do this? or can I.
I believe it has to be php, asp, correct for the include tag.
do you have a reccomendation on how you would do this?
I appreciate the help.
thank you.
Scott White
Sorry it too me so long to respond.
With css you include your external file sheets using a link tag. It should look something like this:
<link rel=”stylesheet” href=”path-to/style.css” type=”text/css” media=”screen” />
There’s also an @import command, but the link tag is the preferred way to include your stylesheets.
Two part question:
Using IE7 I am having a problem with empty white spaces between the menu items. I have tried playing with the spacing, but I can’t seem to get it to go away. Any suggestions?
Second, I am trying to combine a horizontal navigation bar, with a vertical menu bar on the left without a space between them. (So there would be a nav bar on top, a menu on the left, and text in the middle without using frames). Any suggestions there?
Thanks a lot for the great site!
Thanks Barrett.
If you want to point me to the site in question I’ll be happy to take a look and see if I can figure out what the problem might be.
I’m guessing that the space between the menu items is the background behind the menu showing through. Did you apply a background color to the ul or just the li tags? Am I right that you applied a background color?
For your second question check out a post I wrote awhile back on 2 column css layouts. You can put the nav bar inside the header and then the menu inside the left column. There’s no reason why there has to be a space between things.
See if you can get that working. Sometimes different elements inside the header or content or sidebar areas will create spacing due to their defaults. For example an h1 tag will have some margin on it by default and that margin pushes the whole content area down a little leaving a space at the top.
You can use a css reset file to remove the defaults on many elements.
Thanks a ton! The 2 column layout totally saved me so much time and stress!
The only other question I have now is in regards to the “menu” section of the 2 column layout. Is there a way to make the “menu” scroll down with the page so that the links there are always visible on the page, no matter how far down a page a user scrolls?
Thanks a bunch for the help.
If you mean where the menu has a noticeable movement as you scroll then that’s usually done with JavaScript.
If you mean where the menu itself never moves, but everything else can scroll up and down that’s done with css positioning. You’d set the position of the menu to be fixed.
What I think you’d want to do is add position: fixed to the menu itself, not the floated div that creates the column containing the menu.
it like applepie and then i click on applepie the word and then the recipe will show up nice and simple
thank you for a reply back
Very impressed with the clarity of your tutorial, and your willingness to help
However I seem to be having the same problem as others in that the buttons appear as bullet points and the code appears as text.
I think I have code safe within the and tags, so I assume I’m missing something obvious
Here’s one of the offending pages
http://park99.co.nz/dr1.html
Appreciate it if you have time to check it
I’m glad to help Mike. I took a look at your post and see the problem and yes it’s a simple one.
You added the css code directly below the html. Unfortunately the css won’t work there. My bad for not mentioning this in the post, but your css needs to be located either in the head section of your html document or in a separate css file that you include in the document.
I see you’re linking to a style.css file so the easiest thing for you would be to remove the css for the menu from the html file and place it in the style.css file.
The code starting with <ul id=”list-nav”> and ending with </ul> can stay right where it is. All the code that follows is the css and you’ll want to move it into style.css.
Also I’m looking at your style.css file and you have code in it that you don’t want or need. You’ve added html tags in the css file. You can remove the opening and closing html, head, and style tags in the css file. You also have a closing body tag that should be removed too.
Then you should be able to add the css code I’ve provided here in the file and the menu should work. If it doesn’t just let me know and I’ll take another look.
Hi there,
I was wondering if you could help me. I have the code exactly as you show us, but I seem to have this space inbetween each link. I don’t know what I did wrong…
Here’s my website link so you can see:
http://www.freewebs.com/xxwritten-deathxx/
Hi Erika. I’m guessing you’re looking at the page in Internet Explorer. Just so you know the extra space isn’t there in Safari or Firefox.
IE has a weird bug where it places extra whitespace in the lists. One way to fix it is to remove the whitespace in the code. Instead of having the list items be on new lines, you can place them all next to each other on the same line in your code. It’s not the best solution though.
It’s been awhile since I’ve had to deal with this issue, but I think what you need to do is set a height on:
ul#list-nav li
If I remember correctly I used to set the height to be something very small like 1px or 1%.
Try that and see if it works.
Yes, I was looking at it in Internet Explorer, but your help fixed the problem. Thank you very much
Had this issue too. Thanks for posting the solution. Now all works.
Hey I’m new to html… when I copy the final result for the nav bar into notepad and save it as a .html, the webpage just looks like a bullet list with the css actually written out and appearing on the page. Do I need to put the css somewhere else like in the head and say type=css or something?
Sean that’s my bad. You’re right about the solution. The css needs to either be in its own file, which you would then link to in the head section of your html or you can place all the css between style tags in the head section of your html.
Linking to a stylesheet
<link rel=”stylesheet” type=”text/css” href=”theme.css” />
Style tags
<style type=”text/css”>
css here
</style>
Hope that helps. If you still have trouble feel free to email me your file and I’ll take a look.
Thanks! If I wanted to put the CSS in a different file, could I do that in notepad and save it .css?
Yep. The typical name is style.css, but you can name it anything you want as long as you give it the .css extension. You also don’t need to use the style tags if you create a separate css file.
Then use the link tag I used above and make sure to have the href point to your css file.
Do I leave “link rel=”stylesheet”” and “type=”text/css”” as is?
And should “href=”theme.css” />” be the file directory, like “C:userwebsitefoldercssfile.css”?
Thanks a ton for your help.
The link stuff you can leave as is. The href has to point to the location of your css file. The path you show with C: etc points to the file on your hard drive so it wouldn’t work if you moved the page online somewhere. It should work to display on your computer though.
However you don’t really need to use the full path. Assuming your html page (index.html) and your css file are located in the same folder you could just use
href=”cssfile.css”
Usually I create a folder named css inside the folder where index.html lives and then have
href=”css/cssfile.css”
As long as you keep the same folder structure when you move the page online the above should work the same as it does on your computer.
Glad to help. Feel free to ask more questions if you have any.
Hi Steven, I’ve read many posts trying to solve a problem related to my menu made from an unordered list and I’m hoping you can help. This is for a college project and I’m very new to HTML and CSS and Dreamweaver 5.5. I used an ordered list to make a menu across the top and bottom of my page. But, I have other unordered lists on the same page. Everything was fine until I made some hyperlinks to some of the list items. Now the link words are on a separate line and the entire line highlights when I hover. It looks really bad. I think the true unordered lists in the middle are absorbing the formatting for the “menu” unordered lists, but how can I turn that off? Thanks for any help. Connie
Hi Connie. If you want to send me an email with all your code I’ll take a look. I might not be able to get to it until the weekend, but I promise to look.
The solution will depend a little on how everything has been coded, but the general idea is to set up the html in some way so you can style the menus independently of the other lists and links on the page.
In the code in this post I gave the unordered list an id of list-menu so the list can be styled with ul#list-menu instead of just ul. Then a link inside could be styled with:
ul#list-menu a
and only those links get styled instead of all of them.
There are other ways to do the same and I usually do things a little differently today than I did when writing this post.
Again, though feel free to send me all your code and I’ll take a look and see if I can fix things for you and give you an explanation for what I did and why it hopefully worked.
Hi Steven. Many thanks for this post. I am trying to place your simple vertical css and html menu in a div/layer called leftnav but am having difficulty in placing it centrally within that space. The menu seems to align to the right and I have tried all means to correct this but nothing seems to work. I am using Dreamweaver MX2004. I would be very grateful if you could give any advice to align the menu centrally please.
Thanks Pete. Is your page online? If so can you post a link to it. I think I’m going to need to see your code to figure things out. If not feel free to email me your code.
Nothing in my code should be aligning the menu to the right by default. I’m guessing it’s something in your code that’s affecting the menu. If I can see the code I’m sure I can find the problem.
Excellent tutorial,thanks for sharing.
THANK U ,I have a Queston ………if i want to change the size of the border(height)what to do?want to make it small
If you want to change the border look in the code where I have:
border: 1px solid #color;
or
border-width: 1px 2px 2px 2px;
You can change the 1px to anything, however you’re not going to get much smaller than 1px.
When you say height do you mean the border on the top or bottom of the menu item? If so when you see
border-width: 1px 2px 2px 2px
the values are for top, right, bottom, left respectively. Remember the word TRouBLe to remember the order.