Create a CSS Based Menu with images

In this tutorial we’ere going to learn how to create a custom CSS based menu that uses images.  We’ve grabbed a beautfiuly designed menu from http://bestuipsd.blogspot.com/ that we are going to convert into a working css menu. Let’s get started!

 

This is what we’ll be creating:

CSS Menu

 

Live Demo: http://studentwebhosting.com/media/demos/css-menu-tutorial/

Tutorial Assets Download: http://studentwebhosting.com/media/demos/css-menu-tutorial.zip

 

Step 1 – Markup our HTML.

Create an html file and fill it with the following html.  We will use this as the base for our menu, and code the rest with CSS.

Step 2 – Add our CSS (common rules)

First the code, then the explanation.

These css rules define a few properties as such:

  • Line 1: The body tag, defines our gray background image that repeats across the entire screen
  • Line 5: The #menu tag defines our un-ordered list
  • Line 14: This css rule floats all of our list items to the left, enabling the horizontal menu layout
  • Line 20: We define all of our anchor tags as block, which makes it so we can click on the button in the entire button area.  We also make our text that is part of our anchor text in HTML move way off screen, as the text is embedded in our button images.  We set the height of the anchor tags to the height of our images.

Step 3 – Add our custom images to each button

 

I’ve only added two rules, but you’ll rinse and repeat the code outlined above for each button.  A few things to note are:

  •  Set the width property on each of these specific anchor ID rules to the width of their respective images.

Step 4 – Add the images for the “hover” state using css pseudo selectors.

Again, I’ve only listed just two examples here.  You’ll do this same process for each of your images.

Step 5 – Adding the “Down/Selected/Current” selector.

In this step we will add the css that makes our page “current”.  Whichever html menu item has the class of .current will automatically get it’s current image applied because of the CSS below:

Again, I’ve just shown two samples.  You’ll do this for each menu item image.

The last bit of CSS if to ‘clear the float’.  There are many methods of doing this, but we are going to add the class of .clear to a break tag.  Because we floated all of our list items left, they are now not ‘contained’ in the parent un ordered list tag.  We need to do what is referred to as ‘clear the float’ in order to make the UL tag ‘contain’ it’s floated children.  Otherwise bad things end up happening in our design/layout.

Here is that bit of css.

That’s it!  Have an alteration or trick you like to use in your menus?  Let us know in the comments.

11 Comments

  1. phuket
    Mar 16, 2013 @ 04:24:05

    In the event it will come to writing fantastic content material you undoubtedly are the don,
    high 5 bro: )

    Reply

  2. Complicated
    May 15, 2013 @ 20:17:00

    Pls do keep writing more.. Your content is helping so many people. Simple. Easy.

    Reply

  3. Ryan
    Jul 02, 2013 @ 08:19:51

    This is tutorial is great! Very helpful. I was wondering if you would be able to expand the tutorial to add drop down lists to the menu

    Reply

  4. rahul
    Oct 11, 2013 @ 16:34:40

    Well explained…very rarely such a quality and detailed content is found on net

    Reply

  5. Ahmed
    Oct 31, 2013 @ 13:42:03

    Thanks for the tutorial.
    I dont want to change background. Want to change Menu Text to Image. How I can do it. Pls revert.

    Reply

  6. hafid
    Jan 13, 2014 @ 03:37:10

    Thank you very much for this beautiful and easy technic 🙂
    You are the best and you made it so easy, and guess what, it worked fine. Take care Bro.

    Reply

  7. Tomba
    Sep 07, 2014 @ 14:45:56

    Great sample, how do you add a drop down menu for this one?

    Reply

  8. Ray
    Sep 29, 2014 @ 23:01:09

    Thank you so much. I went through many tutorials but the one that really worked was yours. Detailed, explaining, simply good. Regards

    Reply

  9. Alina
    Feb 05, 2015 @ 00:39:49

    Hello,
    I was wondering if there is a dropdown list to this menu.
    Thank you.

    Reply

  10. Mark
    Apr 02, 2015 @ 16:39:40

    Can a height of images be adjusted?

    Thanks

    Reply

  11. Alex
    Jan 06, 2016 @ 13:22:20

    Very helpful. Thank-you.

    Reply

Leave a Reply

*