Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Vertical Navigation or Menu Bar Using CSS

In this tutorial we are going to discuss How to create vertical menu or navigation bar using CSS. Menu bar or  Navigation Bar helps us to Categories web pages easily and CSS design plays most important role over here.
CSS Navigation Bar, How To Create a Top Navigation Bar

Vertical Menu or Navigation Bar.

We have covered two example of vertical menu bars and you can transform boring HTML menus into good-looking navigation bars with the help of CSS design:
1. Generic Menu Bar
2. Menu Bar with notification count.

Explanation about some important CSS property :

list-style-type: none; 
It helps to removes the bullets from the unordered list view.

margin: 0; and padding: 0;
It helps to to remove browser default settings.



Example : 1 
This is a generic navigation bar, which help us to display different categories of web pages. you may have seen this in most of the websites.





ul
{
list
-style-type: none;
margin
: 0;
padding
: 0;
width
: 200px;
background
-color: #f1f1f1;
border
: 1px solid #555;
font
-weight:bold;
}

li a
{
display
: block;
color
: #000;
padding
: 8px 16px;
text
-decoration: none;
}

li
{
text
-align: center;
border
-bottom: 1px solid #555;
}

li
:last-child {
border
-bottom: none;
}

li a
.active {
background
-color: #ff3232;
color
: white;
}

li a
:hover:not(.active) {
background
-color: #555;
color
: white;
}




Vertical Navigation Bar
In this example, we center the navigation links and add a border to the navigation bar.


  • class="active" href="#home">Home

  • href="#PHP">PHP

  • href="#JAVASCRIPT">JAVASCRIPT

  • href="#JQUERY">JQUERY

  • href="#AJAX">AJAX

  • href="#REACTJS">REACTJS

  • href="#CONTACTUS">CONTACT US





  • Output:

    Example : 2
    This navigation bar similar to above one but one extra addition is that "Notification Bar". It helps to display the total number new posts.





    ul
    {
    list
    -style-type: none;
    margin
    : 0;
    padding
    : 0;
    width
    : 200px;
    background
    -color: #f1f1f1;
    border
    : 1px solid #555;
    font
    -weight:bold;
    }

    li a
    {
    display
    : block;
    color
    : #000;
    padding
    : 8px 16px;
    text
    -decoration: none;
    }

    li
    {

    border
    -bottom: 1px solid #555;
    }

    li
    :last-child {
    border
    -bottom: none;
    }

    li a
    .active {
    background
    -color: #ff3232;
    color
    : white;
    }

    li a
    :hover:not(.active) {
    background
    -color: #555;
    color
    : white;
    }
    .notify{
    float:right;
    margin
    -right:7px;
    margin
    -top:-30px;
    background
    -color:#00BFFF;
    padding
    :4px;
    color
    :white;
    display
    :block;
    min
    -width:15px;
    text
    -align:center;
    border
    -radius:8px;
    }





    Vertical Navigation Bar
    In this example, we align the navigation links to left side and add a border to the navigation bar.


    • class="active" href="#home">Home class="notify"> 10

    • href="#PHP">PHP class="notify"> 16

    • href="#JAVASCRIPT">JAVASCRIPT class="notify"> 40

    • href="#JQUERY">JQUERY class="notify"> 25

    • href="#AJAX">AJAX class="notify"> 15

    • href="#REACTJS">REACTJS class="notify"> 2

    • href="#ANDROID">ANDROID class="notify"> 5K

    • href="#CONTACTUS">CONTACT US class="notify"> 1K





    • Output:


      This is all about vertical navigation or menu bar. Let me know your comments below in case of any suggestion.

      Download Link:
      https://github.com/skptricks/php-Tutorials/tree/master/Vertical%20Navigation%20or%20Menu%20Bar%20Using%20CSS




      This post first appeared on Selenium Web Driver Tutorials, please read the originial post: here

      Share the post

      Vertical Navigation or Menu Bar Using CSS

      ×

      Subscribe to Selenium Web Driver Tutorials

      Get updates delivered right to your inbox!

      Thank you for your subscription

      ×