Keith Bates - Creating a Two Toned, CSS Menu: Part 2

Creating a Two Toned, CSS Menu: Part 2

Posted: 09/01/2008

This is the second installment of my tutorial which explains how to create a two-tone navigation much like the one featured on this website. What follows is my method; though I'm sure there are other ways to achieve the same results.

Part one of this tutorial focused on creating the graphical elements needed for the navigation. This part focuses on integrating it into a website using CSS.

Please note that this tutorial does not attempt to explain the fundamentals of CSS and you are encouraged to research the basics on your own. After all, learning is half the battle!

Requirements: HTML editor such as Dreamweaver as well as basic knowledge of CSS.

Step 1: First, you will need to create a new CSS file, open your existing CSS file or you can simply code your CSS rules in-line. I prefer to keep everything in a separate CSS file.

Step 2: Next, we will create a div container to hold our navigation. I suggest creating the div container first as it will allow you to target elements specific to this container.

    #menu{
        height: 30px;
        margin: 0;
        padding: 0;
    }

As you can see, we are creating a rule with and giving it an ID called “menu". We then establish a series of CSS attributes including the height, margin and padding. You can set the height to what ever you want but here I am setting it to half the size of ourmenu image created in part one. For example, if the full height of your menu graphic is 100px, you will set your menu container 50px.

Last of all, we remove all margin and padding from the div container.

Step 3: Because I typically use a transparent gif file to fill in my anchor tags, I create a rule for img tags specific to the “menu” div, removing margins, padding and borders. This step is optional.

    #menu img{
        border: 0px;
        padding: 0px;
        margin: 0px;
    }

Step 4: Now we’ll use an unordered list (ul) to create the layout of our navigation. We need to remove any margins and padding from the ul container. We then need to do the same for the list item elements as well as remove the bullet points. Because this is a horizontal menu we need to make the list item elements float next to each other. This is achieved by creating two separate rules: one rule for the ul element and one rule for the li element.

    #menu ul{
        padding: 0px;
        margin: 0px;
    }

    #menu li{
        padding: 0px;
        margin: 0px;
        list-style: none;
        float: left;

}

Step 5: Now we must set rules for the anchor tags and prepare to use the h2 tag. We need to establish an exact height for both of these elements. We will also remove some of the default settings. Because IE 6 ignores the height attribute for an anchor tag, use the line-height attribute to force it to obey. Both the height and line height should be the same size as the height of the “menu” container, which is also half the height of the full graphic image. Only the top area of the graphic will appear and the bottom area is the rollover and page marker. The anchor tag will also enable the entire list item to be clickable.

    #menu a,
    #menu h2{
        height: 30px;
        line-height: 30px;
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        display: block;
    }

Step 6: Personally, I like nice roll over effects as well as a way to mark the menu so users can easily identify where they are. In this step, create a rule for the hover of the anchor tag and the h2 tag. The h2 will be used to indicate on the menu which page the user is currently on.

    #menu a:hover,
    #menu h2 {
        background-position: 0px -50px;
        margin: 0px;
        padding: 0px;
    }

When a user mouses over the menu item or if the h2 tag is used in place of an anchor tag, the background position of the image will move up (see step 8). In this case, the black area of the graphic will move up and the red area of the graphic will be revealed in its place.

Step 7: In the final step of the CSS, you should create ID’s for each button. Set the width, height, background and background position for each menu item while removing any default margin and padding. You can try and combine the background and background-position together using the shorthand for background but I have read this will not work with what we want in some browsers (IE 6). Feel free to try it though.

    #homeBtn{
        width: 61px;
        height: 50px;
        background: url(../images/home_btn.gif) no-repeat;
        background-position: 0px 0px;
        margin: 0px;
        padding: 0px;
    }

    #aboutBtn{
        width: 73px;
        height: 50px;
        background: url(../images/about_btn.gif) no-repeat;
        background-position: 0px 0px;
        margin: 0px;
        padding: 0px;
    }

Make sure to point the background to the correct graphic created for each menu item and the width should be the exact width of the graphic. Also, make sure you specify the background attribute to not repeat. Create an ID for each menu item and label them accordingly.

Step 8: Now you are styling! (Pun intended)

Finally, create the X/HTML mark-up in the body of the web document. In this case, it would look something like this:

Create a new li element for each menu item in your navigation, making sure you are using the correct ID created in your CSS. Now if you view your web document in a browser, you will hopefully see your menu items floating next to each other. If you roll over them, they should change and reveal the bottom portion of the graphic, creating the over state.

Okay, great! Let’s say you want to include an indicator on the menu showing what page the user is currently on. Simply replace the anchor tag with an h2 tag using the same CSS ID for that menu item. For example, the user is on the “About Us” page so you want this conveyed on the menu:

Now the “About Us” menu item should appear in the “on” or over state but is not clickable.

This concludes the second and final portion of this tutorial. Click here to view Part 1, Creating the Graphical Elements.

To learn more about creating CSS menus visit www.tanfa.co.uk.

For more on CSS in general, click here.

Thanks and enjoy!