CSS Tutorial - css menu

In this css tutorial i'm going to show you how to make a menu using css. Your css menu can include image rollovers or just text.

We'll be using the same layout we used in the previous tutorial: CSS Tutorial - using float to layout your website.

First we'll look at using text for our menu items. The menu will appear as a horizontal menu.

You will need to first declare your ul in your style sheet and attach a class to that ul. We will add a width and a float to our menu class. Then we will put write our style for the li as below:

Notice in our li how we have set the style 'display: inline' this causes your li's to run horizontally. We've also added some margin to the left of the li to space out your menu items and added some padding around the links.

Below is what you html should look like:

Above is how our menu is looking at the moment - not looking great but it's a start.

Next we'll add some formatting to the links to improve their looks.

Below is the css for the links:

Now we've added some colour to our menu items with a white rollover. Obviously in terms of style you can do a lot better but you should now understand how to create a horizontal menu with rollvers.

Next I will show you how to use images with a rollover for your menu items.

First you need to start off with an image which shows your upstate of your menu item and your down state. These 2 images need to be within the same image, like below:

Next we'll add that image into our css as a background image on the a:link. However we won't display the whole image because we only want the top half. The image is 60px in height so we only want to show the top 30px, then one the button is rolled over we want to show the bottom 30px. Here's how we do that with the css:

There are a few things to explain here. Firstly, in the li we have taken out background-color because we now have an image in the background on our link.

Our link has the background image on it and we've said background-repeat: repeat-x this is because our background image is only 12px wide, so we just repeat it to fill up the area. We've added a height of 24px and made the width auto to accommodate the length of the text which is different for each button. We've add a padding to the top of the link to push down the text into the middle of the button and because we've done this we've had to change the height from 30px to 24px because padding-top: 6px increases the size of the link to 36px so we've had to make it 24px to accommodate this.

Lastly in our hover we've put background-position: 0 -30px the first value '0' is to position the background image horizontally and the second value '-30px' positions the background image vertically. So in effect the background image moves up 30px.

Below is what your menu should now look like. The html is unchanged from above.

And that's how to make a simple css menu. If you use a font for your menu items that is not websafe you can always create your buttons as an image with text on and then delete the text in the li, so your background image is the button with text as part of the image. Then add a class to each link and in the css create your classes, then just change the background image for each class to show the correct button.

I hope you have found this tutorial useful. Click the link if you need a website design.

Below are some great resources for css menus

• Turning a list into a navigation bar
  How to use CSS to create a horizontal navigation bar out of a simple ordered list
• Turning Lists into Trees
  by Michal Wojciechowski
• Flexible navigation example
  The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.
• Free CSS Navigation Menu Designs
  Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens
• Free Menu Designs
  Free Menu Designs – e-lusion.com
• FreeStyle Menus v1.0 RC9
  This is an XHTML compliant, CSS-formatted menu script, designed to work with the current generation of standards-based websites….
• More Free CSS Navigation Menu Designs
  More Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens.
• 14 Free Vertical CSS Menus
  14 Free Vertical CSS Menu at ExplodingBoy – Familiar to dozens
• CSS Menu Generator
  Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
• Tabs
  BrainJar – “In this example, we’ll look at using CSS to build a tabbed display…”
• Mini Slide Navigation
  Sandbox – Stephen Clark
• Nested lists used to create a simple folder metaphore
  Here’s a rough and ready example showing how to make a folder analalogy using a nested list.
• Suckerfish Dropdowns
  example page for Suckerfish Dropdowns
• Fast Rollovers Without Preload
  When using CSS image rollovers, two, three, or more images must be loaded….
• Variations on a drop-down theme
  Stu Nicholls – CSSplay