Skimming through the article, This will be useful in my collection of bookmarks 
I love the idea of CSS menus without Javascript.
Cool article!
Many many good techniques here though nothing really new or revolutionary. Plus pure CSS drop downs are pointless without IE 6 support.
Nice job spreading the word on these techniques though.
it is great one to know about more on css
A really good article, thanks!
A few things to add…
The technique you use to give flyout or drop-down menus can be enhanced by the use of Javascript to make it work in IE6 - detailed in http://www.alistapart.com/articles/dropdowns/.
What this does is uses Javascript to apply a class to the sublist when you ‘mouseover’ the parent element, and to remove the class onMouseOut. This gives the same effect in IE6 as using :hover does in better browsers.
If you’re going to make it really accessible, of course, you should repeat it for onFocus/onBlur so that keyboard users (on any browser) can access the submenus.
Another good thing to do is linked in with the technique of using <body id=…> to style the current tab - you can also use <body class=…> to make the current submenu always visible.
ie, if you had a page on menus in the CSS section of your site, you might have, within your menu:
…
<li id=“css”>CSS
<ul><li id=“menus”>Menus</li>
…</ul>
</li>
…
then at the top, have <body id=“menus” class=“css”>.
You can then use CSS to keep the relevant submenu on the screen at all times,
eg
body.css ul#nav li#css ul {
display:block; padding-left:12px;
(other display styles) }
Specificity rules mean that this should override the :hover declaration. Obviously, you can apply the one declaration to all the different submenus by repeating the element line and swapping “css” for the names of the other submenus.
Disclaimer - this is all off the top of my head and may have one or two unforeseen bugs in the implementation. But the general principle is sound!
I was working with the simple horizontal menu example and noticed that, in IE 7, the bottom padding of the links weren’t being rendered, so the buttons looked like the bottoms were ‘cut off’ (no problems in FF). Anyone else see this and/or know how to fix it?
Generally with drop down menus though, the sub menus cover other content when they are ‘active’ - this could be a problem if you had one that is permanently out.
If you are talking about the simple menu that starts with recipe, contact us etc. then the problem is that IE won’t show full padding on inline elements unless you add position:relative to it.
e.g.
[B]#navigation li a{position:relative}[/B]
This is the full code from the article that it applies to in case you were looking at something else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
<style type="text/css">
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation li a{position:relative}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation li a{position:relative}
wrapped knuckles to Rachel for not testing in IE
Why is it necessary to use a list to render navigation? Why can’t you define your navigation using <div id=‘naviagation’> and apply your CSS directly to the <a> tags for that ID and achieve the same effect?
Why go through the hassle of removing the default ul and li formats and redefine them. It seems that if the whole idea is to remove code bloat (by not using tables), that adding superfluous tags such as the ul and li’s doesn’t seems to help either… I keep thinking I’m missing something that makes this process of using li’s worth while, but no one has explained it to me yet.
It’s almost as if someone thought I won’t use tables I’ll use ul’s and never stopped to think if that was necessary either.
The point of HTML isn’t to ‘get rid of bloat’ - it is to mark up all the parts of a document correctly. Since a navigation menu is basically a list of links to various parts of the site, an unordered list is the correct way to mark it up.
The problem with using tables for layout isn’t that they are bloated code, it is that they are the wrong element to use semantically. The idea isn’t to create the HTML using as few elements as possible, the idea is to use the correct elements.
As strormrider said you should endeavor to mark up your html in the most semantic way possible so that it makes sense even before you begin styling.
A navigation is a list of links and therefore using a list is the most semantic element to use and also makes sense to screen readers. If you code bare anchors adjacent to each other then some screen readers may become confused and read out the menu as one long link.
Always use the correct html element for the task in hand and you won’t go far wrong.
Oh come on now, one should use the least amount of semantic and valid elements as possible. The less code you use, the more bandwidth you save, the fewer problems you run into, the benefits are endless.
It’s a goal worthy of striving for; when achieved, one never looks at code the same way again.
lol - that sounds as if you are saying we should use more non-semantic and invalid elements instead (but I know what you meant).
It really isn’t a decision about using less elements it’s a decision about using the right element in the first place. Don’t misuse a tag just because its less code. If its a definition list then us a dl. If its an unordered list then use a ul.
Of course you should always use the minimum code required but not at the expense of semantics.
Yes, of course, but you should still mark up each part of the document appropriately. You shouldn’t just try and save as much bandwidth as possible by removing all the semantics from a document, is what I was saying.
And I agree with you. I’m 110% in favor of semantics, but I also want to see the bare minimum of code used as possible while still achieving that goal.
Or am I the only one who disagrees with Eric Meyer when it comes to using empty nested <b></b> tags as sandbags?
I think we are essentially agreeing with each other!
Hi. I was making the “Chapter 4 - horizontal list menu” and im wondering if it is possible to put the menu in the center of the page. If so, how can i do that?
Hi. I was making the “Chapter 4 - horizontal list menu” and im wondering if it is possible to put the menu in the center of the page. If so, how can i do that?
The easiest way to center something is to give the parent wrapper a width and then use auto margins to center it.
width:500px;
margin:auto
Of course if you are using a fluid width menu you will need to work out the width. If the width changes on different pages (or if the menu is dynamically generated and has an unknown width) then its gets a little more awkward.
YOU ROCK!
I would have included an image replacement technique - as many designs need that these days.
A good article with plenty of CSS goodness.