First write the HTML structure:
<div id="nav"> <ul> <li><a href="#1">Home</a></li> <li><a href="#2">Products</a></li> <li><a href="#3">Address</a></li> <li><a href="#4">About</a></li> <li><a href="#5">Contact</a></li> </ul></div>
Then simply write the style:
Body{font-family: "Microsoft Jas Black";} . Active{ background: -webkit-linear-gradient (top,red,yellow);} ul{float: left; width: px; height: px; background: red; line-height: px; }Li{list-style: none; float: left; }a{text-align: center; line-height: px; Display: block; color: #fff; width: + px; text-decoration: none; }a: Hover{background: green;}
Finally how to highlight the current navigation, JS statement as follows;
<script type="Text/javascript"> var mynav=document.getelementbyid ("nav"). getElementsByTagName ("a"); var currenturl = Document.location.href; for (var i=0; i<mynav.length;i++) { var aurl=mynav[i].getattribute ("href"); if (Currenturl.indexof (Aurl)!=-1) {mynav[i].classname="active"; mynav[0].classname=""; } } </script>
Highlight JavaScript for the current navigation bar