Latest web development tutorials

CSS navigation bar

Example: Navigation Bar

Navigation Bar

Skilled use navigation for any website is very important.

With CSS you can convert into a nice navigation bar instead of boring HTML menus.

Navigation links list =

As a standard HTML based navigation bar is a must

. In our example we will create a standard HTML list navigation bar.

Navigation bar is basically a list of links, so use <ul> and <li> elements are very meaningful:

Examples

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

try it"

Now, let's remove margins and padding from the list:

Examples

ul
{
list-style-type:none;
margin:0;
padding:0;
}

try it"

Examples of analysis:

  • list-style-type: none - before removing the list of small flags. A navigation bar does not need list markers
  • Remove the browser's default setting margins and padding set to 0

The above example code is in the standard vertical and horizontal navigation bar codes used.

Vertical navigation bar

The above code, we only need <a> style elements, establishing a vertical navigation bar:

Examples

a
{
display:block;
width:60px;
}

try it"

Example shows:

  • display: block - display links block element, so that the entirety becomes a clickable link area (not just text), which allows us to specify the width
  • width: 60px - Block elements by default is the maximum width. We want to specify a width of 60 pixels

Tip: See example of a fully-style vertical navigation bar .

Note: Be sure to specify the width of the element in the vertical navigation bar <a>'s.If you omit the width, IE6 can produce unexpected results.

Horizontal navigation bar

There are two ways to create a horizontal navigation bar. Useinline or floatinglist items.

Both methods are fine, but if you want to link to the same size, you must use the floating method.

Inline list items

One to build a horizontal navigation bar is to specify

  • Element, the above code is the standard built-in:

    Examples

    li
    {
    display:inline;
    }

    try it"

    Analysis examples:

    • display: inline; - By default, <li> element is a block element. Here, we remove line breaks before and after each list item, to display the line.

    Tip: See example of a fully-style horizontal navigation bar .

    Floating list items

    In the above example links have different widths.

    For all links of equal width, float <li> element and specify the width of the element <a>:

    Examples

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    try it"

    Analysis examples:

    • float: left - use the slider element slides next to each other
    • display: block - display links block element, so that the entirety becomes a clickable link area (not just text), which allows us to specify the width
    • width: 60px - Block elements by default is the maximum width. We want to specify a width of 60 pixels

    Tip: See example of a fully-style horizontal navigation bar. .