24th of June 2010 1
Simple CSS menu
Creating a simple css menu isn't really that hard but it is always good to have a stable design base to begin with even for the more experienced coder so here i'll present a cross browser css menu with simple design but that still works as a sort of base for other menus.
XHTML
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Random</a></li>
<li><a href="#">Item 49</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Contact</a></li>
</ul>
A simple unordered list is the base for this css menu together with li-tags and regular links. A simple twist would be to add a "on"-class for the current page however that requires you either to program it or use a CMS that supports such logic (like WordPress).
CSS
.menu li { float:left; }
.menu a { display:block; padding:0 10px; text-decoration:none; height:40px; font:bold 11px/40px arial,helvetica,sans-serif; text-transform:uppercase; }
.menu a { float:left; } /* Needed for IE6/IE7 */
.menu a { color:#444; text-shadow:1px 1px #bbb; }
.menu a:hover { background:#888; color:#fff; text-shadow:1px 1px #666; }
IE also need the links (a-tags) to be floated since the links are displayed as block. Also note height and height/line-height for the a-tags.
The css menu has been cross browser tested with IE6 and IE7. There aren't much more to say about this simple CSS menu example but feel free to ask anything as always. Also be sure to check the source of the example and download it and experiment away!
Share it!
Was it good for you to?
Related posts
Similar posts to this oneSponsors
Support for the site!1 great comment(s) for this post
-
shoeb 7:28 pm 12/08 of 2010
Excelent
Reply
Your opinion matters. Add it below.
