Geek Answers Handbook

What is the best practice for CSS style menu layout?

So, I’ve been collecting CSS menus for some time now (another term is borrowing, another is blatant tearing) to learn from them and potentially reuse some of them in my own projects.

Being an oldschool-style purist, I like the idea of ​​stylized <ul> and <ol> s, and better tab menus and interfaces tend to use this method for accessibility or semantic stability or for any reason. I mostly like this method because it keeps my HTML source nice and clean.

Now, I have actually reorganized my CSS menu collection to fit the “master” markup template, which I extrapolated from the most flexible examples such as CSS Zen Garden. It looks like this:

 <div class="menustyle"> <ul> <li class="current"><a href="#" title="Page 1"><span>Home</span></a></li> <li><a href="#" title="Page 2"><span>Toys</span></a></li> <li><a href="#" title="Page 3"><span>About Us</span></a></li> <li><a href="#" title="Page 4"><span>Contact</span></a></li> </ul> </div> <span class="clearit" /><br />

(the "clearit" space at the end is used to set clear:both after the menu they require)

Anyway, I saw variations of this markup on many sites, some with the additional conclusion of <div> , some of which use a different word than current , some add the class current to the <a> tag than <li> , and some leave an internal <span> . Each seems to have its own way of marking up the menu, which is slightly different from the other.

In any case, after I was busy with a lot of menus, the above is what I came up with, but I'm trying to find out if there really is an established best practice for this. At some point, I would like to create a simple CSS menu listing, and it would be nice to get some input on the markup before moving on.

EDIT: The question is not about the Javascript menu. I know that there are excellent menu scripts, and they allow you to have submenus, more advanced animations and hover times, keyboard shortcuts, shadows and everything else. But 90% of the menus do not need these features and use CSS much better for styling and hanging.

+4
source share
4 answers

Besides the fact that I remove the span tags, I think this is normal.

There is no reason to use them, because you can customize the text, but want to

 li a {/*styles*/}

You can also delete

 <span class="clearit" /><br />

. If you try to pop up only in ul inside the div, you can also discard the div. If you need clarity for any other reason, you can do

 <br clear="all"/>
+4
source

you can use the clearfix class for UL (insdead of clearing span):

 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix {display:inline-block} /* Hide from IE Mac \*/ .clearfix {display:block} /* End hide from IE Mac */ * html .clearfix {height:1px}

Now your menu will look like this:

 <div class="menustyle"> <ul class="clearfix"> .....

Of course, you can add these properties directly to UL to avoid any changes to the HTML code :)

+2
source

If you are interested in having a submenu, I would recommend checking out the YUI library. It provides you a browser compatible submenu, from layout.

http://developer.yahoo.com/yui/examples/menu/index.html

+1
source

CSS menus are pain in the back and so on. All this cross-browser compatibility, IE javascript patch files, and so on. In particular, to answer your question: they are no different today than three years ago, because IE7 does not support: hover over non-links, and IE6 still needs to be supported.

These days, just download jQuery, install the Superfish plugin and include this code:

 $(function() { $("ul.menu").superfish(); });

and done. Even works on IE6 (with less features).

0
source

More articles:


All Articles