Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu


Posted on : Wed, 17th Aug 16 12:56 pm (Updated on : Wed, 17th Aug 16 12:56 pm) UTC
Author : Code2care
2314 votes

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

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

    Step 1 : Code Language : 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 unordered list with bullets (we need to add CSS right?).

    STEP 1 : Output

  2. Now lets add CSS properties to nav class : Its important to set width to be 100% set margin and padding as 0.

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

    Step 2 : Output

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

    Step 3 : Code Language : Css
    .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.

  4. We are almost done, lets remove anchor tag text decoration and add some hover effects.

    Step 4 : Code Language : 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

Note : This is not a responsive design navigation menu.

Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +