Share

Nowdays making great menus with CSS is not very hard to achieve, but in order to make great, functional and accessible menu at same time needs a bit more work.

In order to make accessible rounded menu you will have to take care of images which shouldn't replace the text as resizing them will lead to bad display and screen magnifier users may be unable to read text embedded in images as it can appear blurry and pixelated to them. So let's start using power of CSS to make nice accesible and even rounded menu tabs.

First let's write some HTML code to structure our base menu:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Take a tour</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

If you preview this code in your browser it will look like this:

• Home
• About us
• Portfolio
• Contact us

At this point we want to apply some CSS rules in order to make horizontal menu with all tabs displaying next to each other. We will also add up some colors:

#navigation a
{
color: #FFF;
background: #00335b;
text-decoration: none;
}

#navigation ul
{
padding: 0;
margin: 0;
}

#navigation li
{
list-style: none;
float: left;
margin: 0;
}

To get rid of the bullets we used the CSS command, list-style: none and to display our menu tabs inline, so that they're all stacked next to each other, we used float: left. View the result of the current stage. As you can see we need some more work to do here.

Since we want rounded menu we will add left rounded corner to the tabs by appling modification to the CSS which will include this image as background image of urls in the list. We will also add some padding to move the text a bit as it would be on the top the left corner:

#navigation a
{
color: #FFF;
background: #00335b url(tab-left.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px;
}

As we can assign only one background image to a CSS rule we need to make new rule and assign this right rounded image to it. We will do that by adding <span> into a html code:

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>

Now we can apply the new CSS rule along with padding to move a text like in a previous step:

#navigation a span
{
background: url(tab-right.gif) right top no-repeat;
padding-right: 10px;
}

View the results of what we have done until this step.

Unfortunately these tabs won't work on a couple of browsers, as the rounded edges of the tabs don't appear. As such, each menu tab will be displayed as a rectangle, with sharp corners. There's an easy solution to this, which is to insert display: block into the #navigation a and #navigation a span CSS commands.

#navigation a, #navigation a span
{
display: block;
float: left;
}



Final touch would be to add some nice hover effects with new CSS rules. We will need a couple of new images for hover effect , and this addition to the CSS:

#navigation a:hover {
color: #00335b;
background: #ffa20c url(tab-left-hover.gif) left top no-repeat;
padding-left: 10px;
}

#navigation a:hover span
{
background: url(tab-right-hover.gif) right top no-repeat;
padding-right: 10px;
}

Now we have final result. Try zooming and scaling it. It's flexible, isn't it?

So our menu finally looks nice and it's functional:

And at the end if someone has CSS disabled this menu will look just like it was in the beginning:

• Home
• About us
• Portfolio
• Contact us