Friday, February 9, 2018

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.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#PHP">PHP</a></li>
  <li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
  <li><a href="#JQUERY">JQUERY</a></li>
  <li><a href="#AJAX">AJAX</a></li>
  <li><a href="#REACTJS">REACTJS</a></li>
  <li><a href="#CONTACTUS">CONTACT US</a></li>
</ul>

</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}

</style>
</head>
<body>

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

<ul>
  <li><a class="active" href="#home">Home </a>  <span class="notify"> 10 </span> </li> 
  <li><a href="#PHP">PHP</a>  <span class="notify"> 16 </span> </li>
  <li><a href="#JAVASCRIPT">JAVASCRIPT</a>  <span class="notify"> 40 </span>  </li>
  <li><a href="#JQUERY">JQUERY</a> <span class="notify"> 25 </span>  </li>
  <li><a href="#AJAX">AJAX</a> <span class="notify"> 15 </span>  </li>
  <li><a href="#REACTJS">REACTJS</a> <span class="notify"> 2 </span>  </li>
  <li><a href="#ANDROID">ANDROID</a> <span class="notify"> 5K </span>  </li>
  <li><a href="#CONTACTUS">CONTACT US</a> <span class="notify"> 1K </span>  </li>
</ul>

</body>
</html>

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


No comments:

Post a Comment