<styletype="巧灶text/css">
mainMenu{
background-color:FFF;/*Backgroundcolorofmainmenu*/
font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontsofmainmenuitems*/
font-size:1.2em;/*Fontsizeofmainmenuitems*/
border-bottom:1pxsolid000000;/*Bottomborderofmainmenu*/
height:30px;/*Heightofmainmenu*/
position:relative;/*Don'tchangethispositionattribute*/
visibility:hidden;
}
mainMenua{
padding-left:20px;/*Spacesattheleftofmainmenuitems*/
padding-right:20px;/*Spacesattherightofmainmenuitems*/
font-weight:bold;
/*Don'tchangethesetwooptions*/
position:absolute;
bottom:-1px;
}
submenu{
font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontofsubmenuitems*/
background-color:E2EBED;/*Backgroundcolorofsubmenuitems*/
visibility:hidden;
width:778px;/*Don'tchangethisoption*/
}
html>bodyclearmenu{/*nonIEbrowsersmenubottomspacing*/
margin-bottom:2px;
}
submenudiv{
white-space:nowrap;/*Don'tchangethisoption*/
}
/*
Styleattributesofactivemenuitem
*/
mainMenu.activeMenuItem{
/*Borderoptions*/
border-left:1pxsolid000000;
border-top:1pxsolid000000;
border-right:1pxsolid000000;
background-color:E2EBED;/*Backgroundcolor*/
cursor:pointer;/*Cursorlikeahandwhentheusermovesthemouseoverthemenuitem*/
}
/*
Styleattributesofinactivemenuitems
*/
mainMenu.inactiveMenuItem{
color:000;/*Textcolor*/
cursor:pointer;/*Cursorlikeahandwhentheusermovesthemouseoverthemenuitem*/
}
submenua{
text-decoration:none;/*Nounderlineonsubmenuitems-usetext-decoration:underline;ifyouwantthelinkstobeunderlined*/
padding-left:5px;/*Spaceattheleftofeachsubmenuitem*/
padding-right:5px;/*Spaceattherightofeachsubmenuitem*/
color:000;/*Textcolor*/
}
submenua:hover{
color:FF0000;/*Redcolorwhentheusermovesthemouseoversubmenuitems*/
}
</style>孝腊扮
<scripttype="text/javascript">局乎
//morejavascriptfrom/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
functionGet_Cookie(name){
varstart=document.cookie.indexOf(name+"=");
varlen=start+name.length+1;
if((!start)&&(name!=document.cookie.substring(0,name.length)))returnnull;
if(start==-1)returnnull;
varend=document.cookie.indexOf(";",len);
if(end==-1)end=document.cookie.length;
returnunescape(document.cookie.substring(len,end));
}
//Thisfunctionhasbeenslightlymodified
functionSet_Cookie(name,value,expires,path,domain,secure){
expires=expires*60*60*24*1000;
vartoday=newDate();
varexpires_date=newDate(today.getTime()+(expires));
varcookieString=name+"="+escape(value)+
((expires)?";expires="+expires_date.toGMTString():"")+
((path)?";path="+path:"")+
((domain)?";domain="+domain:"")+
((secure)?";secure":"");
document.cookie=cookieString;
}
functionshowHide()
{
if(activeMenuItem){
activeMenuItem.className='inactiveMenuItem';
vartheId=activeMenuItem.id.replace(/[^d]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
}
activeMenuItem=this;
this.className='activeMenuItem';
vartheId=this.id.replace(/[^d]/g,'');
document.getElementById('submenu_'+theId).style.display='block';
if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index:'+(theId-1),100);
}
}
functioninitMenu()
{
varmainMenuObj=document.getElementById('mainMenu');
varsubMenuObj=document.getElementById('submenu');//DDaddedline
mainMenuObj.style.visibility=subMenuObj.style.visibility="visible"//DDaddedline
varmenuItems=mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility='hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
varcookieValue=Get_Cookie('dhtmlgoodies_tab_menu_tabIndex')+'';
cookieValue=cookieValue.replace(/[^d]/g,'');
if(cookieValue.length>0&&cookieValue<menuItems.length){
activeTabIndex=cookieValue/1;
}
}
varcurrentLeftPos=15;
for(varno=0;no<menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick=showHide;elsemenuItems[no].onmouseover=showHide;
menuItems[no].id='mainMenuItem'+(no+1);
menuItems[no].style.left=currentLeftPos+'px';
currentLeftPos=currentLeftPos+menuItems[no].offsetWidth+topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem=menuItems[no];
}elsemenuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom='-1px';
}
varmainMenuLinks=mainMenuObj.getElementsByTagName('A');
varsubCounter=1;
varparentWidth=mainMenuObj.offsetWidth;
while(document.getElementById('submenu_'+subCounter)){
varsubItem=document.getElementById('submenu_'+subCounter);
if(leftAlignSubItems){
//Noaction
}else{
varleftPos=mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft=leftPos+'px';
subItem.style.position='absolute';
if(subItem.offsetWidth>parentWidth){
leftPos=leftPos-Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft=leftPos+'px';
subItem.style.position='static';
}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}
subCounter++;
}
if(document.all){
mainMenuObj.style.visibility='visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}
window.onload=initMenu;
</script>
<divid="mainMenu">
<a>网页特效</a>
<a>插件下载</a>
<a>网络学院</a>
<a>网站联盟</a>
</div>
<divid="submenu">
<!--Thefirstsubmenu-->
<divid="submenu_1">
<arel="nofollow" href="javascript.asp?type=图形图像">图形图像</a>
<arel="nofollow" href="javascript.asp?type=鼠标事件">鼠标事件</a>
<arel="nofollow" href="javascript.asp?type=时间日期">时间日期</a>
<arel="nofollow" href="javascript.asp?type=导航菜单">导航菜单</a>
<arel="nofollow" href="javascript.asp?type=文字效果">文字效果</a>
<arel="nofollow" href="javascript.asp?type=窗体变化">窗体变化</a>
</div>
<!--Secondsubmenu-->
<divid="submenu_2">
<arel="nofollow" href="plug.asp?type=DreamWeaver插件">DreamWeaver插件</a>
<arel="nofollow" href="plug.asp?type=FireWork插件"FireWork插件</a>
<arel="nofollow" href="plug.asp?type=PhotoShop插件">PhotoShop插件</a>
<arel="nofollow" href="plug.asp?type=FLASH组件">FLASH组件</a>
</div>
<!--Thirdsubmenu-->
<divid="submenu_3">
<arel="nofollow" href="study.asp?type=网页制作">网页制作</a>
<arel="nofollow" href="study.asp?type=网络编程">网络编程</a>
<arel="nofollow" href="study.asp?type=图形图像">图形图像</a>
<arel="nofollow" href="study.asp?type=多媒体制作">多媒体制作</a>
<arel="nofollow" href="study.asp?type=网站建设">网站建设</a>
<arel="nofollow" href="study.asp?type=操作系统">操作系统</a>
</div>
<!--Fourthsubmenu-->
<divid="submenu_4">
<arel="nofollow" href="webmeng_show.asp?type=1">网页设计</a>
<arel="nofollow" href="webmeng_show.asp?type=2">艺术创作</a>
<arel="nofollow" href="webmeng_show.asp?type=3">电脑网络</a>
<arel="nofollow" href="webmeng_show.asp?type=4">生活休闲</a>
<arel="nofollow" href="webmeng_show.asp?type=5">个性展示</a>
<arel="nofollow" href="webmeng_show.asp?type=6">其它类型</a>
</div>
</div>
<brid="clearmenu"/>
标签：下拉菜单,JS,代码
