CSS Navigation and Menu

Navigation BarsHaving easy-to-use navigation is important for any web site.With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base In our examples we will build the navigation bar from a standard HTML list.
Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Now let’s remove the bullets and the margins and padding from the list
Example

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

Vertical Navigation Bar
To build a vertical navigation bar we only need to style the elements, in addition to the code above:
Example

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

Horizontal Navigation Bar
Both methods work fine, but if you want the links to be the same size, you have to use the floating method

Inline List Items

One way to build a horizontal navigation bar is to specify the

  • elements as inline, in addition to the “standard” code above
    Example

 

li {
     display: inline;
 }

Floating List Items
For all the links to have an equal width, float the <li>elements and specify a width for the <a>elements:
Example

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

li {
    float: left;
}

a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}

Example explained:

  • float: left – use float to get block elements to slide next to each other
  • display: block – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
  • width: 60px – Since block elements take up the full width available, they cannot float next to each other. We specify the width of the links to 60px

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a {
    display: block;
    width: 60px;
    background-color: #069;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#about">Jobs</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>
</html>
cartoon porn

Admin has written 171 articles