A neat and clean CSS menu

Chuck — Fri, 28 Aug 2009 07:13:22 +0000

Earlier this week, our team of developers was temporarily reassigned to help with another team’s debugging tasks due to a pressing deadline. Our front-end team was busy and only some of us from the back-end team were free to help.

The framework was based on Magento. Since our teams were all CodeIgniter developers, we found it hard to adapt to that framework. We were shocked to find out that majority of the fixes were front-end related, requiring mostly CSS and JS to fix. This was because navigating through Magento’s files was a pain. In addition, most of my teammates and colleagues from the other teams avoided the CSS bits because they either had limited CSS knowledge or were simply not confident enough to manipulate that website’s huge CSS file. So I took that task.

The website we were working on had a 3-tier navigation menu on top, controlled by JavaScript. I spent the better part of the day on that navigation bar building the content for the other menu and tackling the JS browser incompatibility problems… I previously mentioned in another entry that I suck at JS, needless to say what I did was a quick and dirty hack that works but one I’m not proud of, haha.

Anyway, 2 days later (that’s today), I was thinking – I bet it’s possible to mimic that navigation bar using purely CSS and no JS. So I set out and tried my hand at it. I relied heavily on nested declarations in order to keep the styles neat and the markup less cluttered. Here’s the stylesheet I came up with:

html, body {
margin: 0px;
padding: 0px;
}
#navigation {
width: auto;
border: 1px solid #888;
background-color: #EEE;
color: #444;
list-style: none;
height: 22px;
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS";
margin-bottom: 30px;
}
#navigation>li {
float: left;
width: 100px;
text-align: center;
height: 100%;
cursor: pointer;
}
#navigation li:hover, #navigation>li:hover>a {
background-color: #000;
color: #FFF;
}
#navigation li a, #navigation li ul {
text-decoration: none;
color: black;
}
#navigation li a:first-letter {
color: blue;
font-size: 100px;
}

#navigation li ul {
border-bottom: 1px solid black;
border-top: 1px solid black;
width: 100%;
background-color: white;
height: auto;
display: none;
position: absolute;
float: left;
left: 0px;
list-style: none;
overflow: hidden;
padding: 0px;
}
#navigation li ul li {
float: left;
margin: 0px;
clear: right;
width: 200px;
padding-left: 1em;
padding-right: 1em;
}
#navigation li:hover ul {
display: block;
}
#navigation li ul li:hover {
background-color: red;
}

As for the menu’s markup itself, it consists of a master <ul> with an id of “navigation”, with nested <ul>s contained inside of it.

Here’s what the markup looks like:

<ul id="navigation">
<li><a href="#">Dogs</a>
<ul>
<li>Dog 1</li>
<li>Dog 2</li>
<li>Dog 3</li>
</ul>
</li>
<li>Cats
<ul>
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
<li>Cat 4</li>
<li>Cat 5</li>
</ul>
</li>
<li>Pigs</li>
</ul>
<div>Place your content here</div>

The markup looks really neat and simple with none of those pesky class="" attributes to get in the way. Also you can add as much menu items as you please.

So far this CSS declaration only supports 2-tier menus. I could try working on 3-tier, or even maybe a dynamic-depth CSS menu, if I don’t feel lazy :p.

You could see it in action by viewing this page.

Alternately, if you’re not a fan of horizontal menus, you can easily convert it into a vertical menu by removing the float: left; property in the #navigation li ul li declaration. Getting rid of the white background should be easy.

Update: August 29, 2009

I wrote another CSS declaration for 3-tier menus in vertical format. You could see the sample by going here.

Chuck's Musings » markup

A neat and clean CSS menu