In this tutorial we are going to discuss How to create horizontal 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.
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.
Lets see the complete example for horizontal menu bar design using HTML and CSS.
Hope you like this tutorial for HTML Menu Bar Design.
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Horizontal%20Navigation%20or%20Menu%20Bar%20Using%20CSS
Demo link :
https://skptricks.github.io/learncoding/horizontal-navigation-or-menu-bar-using-css/horizontal%20menu.html
Horizontal Menu or Navigation Bar :
This is a example for horizontal menu bars and you can transform boring HTML menus into good-looking navigation bars with the help of CSS design:
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.
Lets see the complete example for horizontal menu bar design using HTML and CSS.
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e7e7e7; background-color: #f3f3f3; } li { float: left; border-right:1px solid #bbb; } li:last-child { border-right: none; } li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-weight:bold; } li a:hover:not(.active) { background-color: #e7e7e7; } .active { background-color: #ff3232; } </style> </head> <body> <div style="width:900px;margin:10px auto;"> <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="#HTML">HTML</a></li> <li style="float:right"><a href="#about">About Us</a></li> </ul> </div> </body> </html>
Hope you like this tutorial for HTML Menu Bar Design.
Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Horizontal%20Navigation%20or%20Menu%20Bar%20Using%20CSS
Demo link :
https://skptricks.github.io/learncoding/horizontal-navigation-or-menu-bar-using-css/horizontal%20menu.html
No comments:
Post a Comment