CSS Navigation Menu

Menu is an essential part of the web page layout, which is very decorative and interactive section of page. Menus should be simple enough for the end user to understand, but also contain the necessary information to guide the end user through the entire website.

CSS Menu Bar

Effective navigation can help to increase user experience, page impressions, and even achieved a very good revenue . The Menu is comprised of one or more Menu Items typically organized into different levels of a menu hierarchy. There are different types of menus you can create in CSS. The most popular are the horizontal and the vertical menus.

Horizontal Menu (CSS Navigation bar)

In this section of the CSS tutorial you will learn how to create a Horizontal Menu for your web site. There are many methods that can be used to making a horizontal menu, here we make a menu with CSS list.

Menu Demo

Full Source

<!DOCTYPE html>
<html>
<head>
  <style>
    .navigation ul
    {
      margin: 1px;
      padding: 1px;
      list-style-type: none;
      text-align: center;
    }
    .navigation ul li
    {
      display: inline;
    }
    .navigation ul li a
    {
      text-decoration: none;
      padding: .2em 1em;
      color: black;
      background-color: orange;
      border: 1px solid black;
    }
    .navigation ul li a:hover
    {
      background-color: Bisque;
      color: black;
    }
  </style>
  </head>
  <body>
  <div class="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</body>
</html>

Vertical Menu (CSS Side Menu)

In this section of the CSS tutorial you will learn how to create a Vertical Menu for your web site.

Menu Demo

Full Source

<!DOCTYPE html>
<html>
<head>
  <style>
    .navigation ul
    {
      margin: 1px;
      padding: 1px;
      list-style-type: none;
    }
    .navigation li
    {
      margin: 0 0 4px 0;
    }
    .navigation a
    {
      display: block;
      color: black;
      background-color: orange;
      width: 120px;
      padding: 4px 12px;
      text-decoration: none;
      border: 1px solid black;
    }
    .navigation a:hover
    {
      background-color: Bisque;
      color: black;
    }
  </style>
  </head>
  <body>
  <div class="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</body>
</html>