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

Step 1 : CodeLanguage : HTML

<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?).

STEP 1: Output

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.

Step 2

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

Step 2: Output

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

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

Step 3

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

CSS Menu Output Step 3 Step 3 Output: Nav Options now displayed next to each other.

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

Step 4 : CodeLanguage : CSS

.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;
}

Final Demo

Demo on JSFiddle: https://jsfiddle.net/code2care/ax578793

Note: This is not a responsive design navigation menu.

Have Questions? Post them here!