CSS NAVIGATION BAR

Many a time when there is a need to go for a navigation bar we simply remember javascript and write a functionality based on mouse onhouver property, we achieve the functionality but sometimes when javascript is disabled on clients computer then what the function never fires but in CSS we have functionality called hover will always run independent of javascript and writing is also very simple here is example how we can achieve it.

Step 1: Create an html file copy and paste the code below.

xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Strip Menu Model</title>

<style type=”text/css”>

.stripboxmenu {padding: 0; width: 100%; /* width of the menu strip, 100% will extend to the full resolution of the screen */

border-top: 5px solid #000033; /*specify the color strip width,color */

background: transparent;

}

.stripboxmenu ul {margin:0;

margin-left: 80px; /*space between first menu item and left edge*/

padding: 0; /*Spacing between the strip and menu boxes*/

list-style: none;

}

.stripboxmenu li {display: inline;

margin: 2 2px 2 2;

padding: 0;

text-transform:uppercase;

}

.stripboxmenu a {

float: left;

display: block;

font: bold 12px Arial; /* Specify the font attributes like font style, boldness */

color: black; /* specify the color of the font */

text-decoration: none; /* remove the default underline of the anchor tag */

margin: 2 2px 2 2; /*Margin between each menu item, you can increase the spacing between the menus by adjusting the attributes*/

padding: 7px 15px 7px 15px; /*with this we can increase the width of the menu item (blue background)*/

background-color: lightblue; /*menu color*/

border-bottom: 9px solid white;

}

.stripboxmenu a:hover{

background-color: #f98a10; /*Mouseover color*/

padding-top: 20px; /*increase the height of the menu on mouseover using padding attribute */

border-bottom-color: #f98a10;

color: white;

}

/*Specify the style for current tab*/

.stripboxmenu .current a{

background-color: #000000;

padding-top: 12px;

border-bottom-color: #000000;

color: white;

}

</style>

</head>

<body>

<div>

<ul>

<li><a href=”#” title=”home”>Home</a></li>

<li><a href=”#” title=”what we do”>What We Do</a></li>

<li><a href=”#” title=”services”>Services</a></li>

<li><a href=”#” title=”clients”>Clients</a></li>

<li><a href=”#” title=”contact us”>Contact Us</a></li>

</ul>

</div>

<br style=”clear: both;” />

</body>

</html>

Step 2: now run the file in any browser it will look like this

As the html is rendered as li and anchor link inside it we can have many li inside another li to have sub sub menus.

Reference : Dilip Kumar Jena ( https://mstechexplore.wordpress.com )