Navigation Using Unordered Lists

An unordered list (the

    tag in HTML) is a great way to easily organize your site navigation with a minimal use of HTML, but how is it done? This is a simple tutorial showing you exactly how to create a simple list-based navigation menu in your site.
    Vertical Menus

    Vertical menus are the easiest list-based menus to create; basically all you have to do is hide the bullets and padding for your list using CSS. In the example below, we have a very simple two-level vertical navigation menu.
    The HTML:

    The CSS:

    ul.navigation,
    ul.navigation ul {
    margin: 0;
    }
    ul.navigation li {
    list-style-type: none;
    padding: 0 0 0 20px;
    }

    The Result:

    Horizontal Menus

    Horizontal menus are slightly more complex than the vertical variety, but they aren’t so far removed. As you can see in the example below, the HTML remains largely the same; we’ll modify the CSS to allow the navigation list items to appear in left-to-right orientation.
    The HTML:

    The CSS:

    ul.navigation,
    ul.navigation ul {
    margin: 0;
    }
    ul.navigation li {
    list-style-type: none;
    float: left;
    }

    The Result:

    The basic structure (as shown in the examples above) can be used for your site menus, but you’ll undoubtedly want to add some style and color to match the design of your site. Here are a few examples to get you started and to perhaps give you some ideas of your own.
    Vertical Navigation

    Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

    Horizontal Navigation

    Click on the image below to see the demo. On the demo page, right-click and view source to see the code.

    As you can see, we’re using CSS to add rollover effects and sub-menu background colors. You can add images and other navigation elements to take your design even further.

    Advertisements
By Rz Rasel Posted in Css

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s