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 Ya-hei";
active{
background:-webkit-linear-gradient (Top,red,yellow);
}
ul{float:left;width:500px;height:30px;background:red;line-height:30px;}
Li{list-style:none;float:left;}
A{text-align:center;line-height:30px;display:block;color: #fff; width:70px;text-decoration:none;}
A:hover{background:green;}
Finally how to highlight the current navigation, JS statements are as follows;
<script type= "Text/javascript" > var mynav=document.getelementbyid ("Nav"). GE
Telementsbytagname ("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>