Last Update:2017-08-24
Source: Internet
Author: User
Keywords
Web page production
Ajax
javascript
<html> <head> <meta http-equiv= "Content-type content=" HTML; charset=gb2312 "> <title> High Imitation blue Ideal website navigation menu </title> </head> <style type= "Text/css" > #dNavBar { Background-color: #ffffff; } #dNavBar li{ List-style-type:none; Float:left; width:84px; height:28px; line-height:28px; font-size:12px; color: #FFFFFF; border:3px solid #ffffff; Background-color: #86C2FF; Text-align:center; Display:block; Cursor:pointer; } #subMenu { Background-color: #0000FF; width:500px; border-left:3px solid #ffffff; border-right:3px solid #ffffff; height:29px; line-height:29px; color: #FFFFFF; font-size:12px; padding-left:10px; } Body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; } A:link { color: #FFFFFF; Text-decoration:none; } a:hover{ color: #FFFFFF; Text-decoration:none; } a:visited{ color: #FFFFFF; Text-decoration:none; } </style> <script language= "JavaScript" > function ShowMenu () { var Barctt=document.getelementbyid ("Dnavbar") var liarr=barctt.getelementsbytagname ("Li") var links=new Array () links[0]= "<a href=http://www.jzread.com> Current Location: Home" links[1]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project Two </a> | <a href=http://www.jzread.com> Project Three </a> | <a href=http://www.jzread.com> Project Four </a> " links[2]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project Two </a> | <a href=http://www.jzread.com> Project Three </a> " links[3]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project Two </a> | <a href=http://www.jzread.com> Project Three </a> | <a href=http://www.jzread.com> Project Four </a> | <a href=http://www.jzread.com> Project Five </a> " links[4]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[5]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project Two </a> | <a href=http://www.jzread.com> Project Three </a> " links[6]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[7]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[8]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[9]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[10]= "<a href=http://www.jzread.com> project </a>| <a href=http://www.jzread.com> Project two </a> " links[11]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " links[12]= "<a href=http://www.jzread.com> Project </a> | <a href=http://www.jzread.com> Project two </a> " for (i=0;i<liarr.length;i++) { liarr[i].onclick=function () { selectthis (this,liarr,links) } } } function Selectthis (Indexobj,allli,infoarr) { var index=0; for (i=0;i<allli.length;i++) { allli[i].style.border= "3px solid #ffffff"; allli[i].style.backgroundcolor= "#86C2FF"; allli[i].style.height= "28px"; if (Indexobj==allli[i]) { index=i; } } indexobj.style.borderbottom= "0px solid #666688"; indexobj.style.backgroundcolor= "#0000FF"; indexobj.style.height= "31px"; document.getElementById ("submenu"). Innerhtml=infoarr[index]; } </script> <body onload= "ShowMenu ()" > <div id= "Dnavbar style=" float:none; width:560px; " ><li> Home </li><li> Entertainment express </li><li> music world </li><li> Acura flash</li> </div> <div id= "submenu" > Station Announcements </div> </body> </html>