Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu

Let's create a very simple Lightweight Pure CSS based Vertical Navigation Menu. We will not be using any jQuery or JavaScript.

First let us create a simple unordered list <ul> with list items <li> that will be our navigation bar options/links

<ul class="nav">
  <li class="nav-logo">LOGO</li>
  <li class="nav-option">JAVA</li>
  <li class="nav-option">PHP</li>
  <li class="nav-option">CSS</li>
  <li class="nav-option">JavaScript</li>
  <li class="nav-option">SharePoint</li>
  <li class="nav-option">Android</li>
</ul>

If you see the output of this on a web browser you would see all the elements as an unordered list with bullets (we need to add CSS right?).

LOGO
JAVA
PHP
CSS
JavaScript
SharePoint
Android

Now let's add CSS properties to nav class: It's important to set the width to be 100% set margin and padding as 0.

.nav {
    width:100%;
    background:#e8e8e8;
    margin: 0;
    padding: 0;
    border-top:1px solid #cfcfcf;
    border-bottom:1px solid #cfcfcf;
}

• LOGO
• JAVA
• PHP
• CSS
• JavaScript
• SharePoint
• Android

To display list items next to each other we need to use property display:inline

.nav li {
    display: inline;
    line-height: 37px;
    padding:10px;
    display:inline;
}

We are almost done, let's remove anchor tag text-decoration and add some hover effects.

.nav-logo {
    background:#d8d8d8;
    border-right:1px solid #b8b8b8;
    border-left:1px solid #ccc;

}
.nav-logo a {
    text-decoration:none;
    color:#222;
    font-size:18px;
}
.nav-option a {
    text-decoration:none;
    color:#111;
    font-size:18px;
}
.nav-option {
    background:#e8e8e8;

}
.nav-option:hover {
    background:#ddd;
}