Codes for CSS Navigation menu

The power of CSS navigation menus on websites remains unparallel. You need to create the right set of codes for CSS and your website will be a fascinating site for all.

HTML code for CSS Menu

To begin with, you need to know the HTML code for CSS menu:

<div id= "nav-menu">
    <ul>
        <li><a href= "#">Services</a></li>
        <li><a href= "#">About Us</a></li>
        <li><a href= "#">Contact Us</a></li>
    </ul>
</div>

That is it! Too simple!

Creating the Boxes

Once the menu items are all lined up against one another, you can take a good look at it. So the CSS rule that rules here is:

#nav-menu li a {
    background: url("background.gif") #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
}

The background CSS command is most important. In it, we will specify the URL of the background image for a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we had not specified the background image to be in the bottom of the box, it would be placed in the top left corner. This would cause the white background color to be visible right below the background image, and not above like it is now.

Removing bullets

You can remove the bullets through a set of new CSS rule:

#nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

the important CSS command is the first one, list-style: none, which says that we do not want any kind of bullet in our navigation menu. The others are also so important that they ensure maximum control over the layout and to make sure the text displays in the center of the box.

No wrapping

There is one final CSS rule that needs to be created and assigned with a width to CSS menu navigation. If this rule is not assigned, menu items on the right may be pushed below the others if users resize their screens. The new CSS command is as follows:y

#nav-menu {
    width: 30em
}

That was pretty lucid.

Follow it to give a new dimension to your CSS menus.

Of course there a lot complex ways to create CSS menus, you can even create CSS navigation with sub menus, and sub sub menus, but this is a good start for beginner.

Popularity: 20% [?]

Categories: CSS Navigation, Posted on January 12, 2008 by Choppr | Log in