Vertical Menu or Navigation Bar.





Explanation about some important CSS property :

list-style-type: none;





margin: 0; and padding: 0;

Example : 1

<!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>

Example : 2

<!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>

In this tutorial we are going to discussorhelps us to Categories web pages easily and CSS design plays most important role over here.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 Bar2. Menu Bar with notification count.It helps to removes the bullets from the unordered list view.It helps to to remove browser default settings.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.This navigation bar similar to above one but one extra addition is that "Notification Bar". It helps to display the total number new posts.This is all aboutLet me know your comments below in case of any suggestion.