导航按钮实现.docx
- 文档编号:12039176
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:11
- 大小:16.45KB
导航按钮实现.docx
《导航按钮实现.docx》由会员分享,可在线阅读,更多相关《导航按钮实现.docx(11页珍藏版)》请在冰豆网上搜索。
导航按钮实现
--
body{
font-family:
arial,宋体,serif;
font-size:
12px;
background-color:
#B3D4FF;
}
*{margin:
0px;padding:
0px;}
#nav{
width:
174px;
line-height:
24px;
list-style-type:
none;
text-align:
left;
/*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nava{
width:
174px;
display:
block;
padding-left:
20px;
/*Width(一定要),否则下面的Li会变形*/
}
#navli{
border-bottom:
#FFF1pxsolid;/*下面的一条白边*/
float:
left;
background-color:
#FECFD6;
color:
#333333;
font-weight:
bold;
background:
url(../images/dot_o.gif)no-repeat8px8px;
}
#navlia:
hover{
background:
#F7A868;/*一级目录onMouseOver显示的背景色*/
}
#nava:
link{
color:
#333333;text-decoration:
none;
}
#nava:
visited{
color:
#333333;text-decoration:
none;
}
#nava:
hover{
color:
#FFF;text-decoration:
none;font-weight:
bold;
}
/*==================二级目录===================*/
#navliul{
list-style:
none;
text-align:
left;
}
#navliulli{
background:
#F5F5F5;/*二级目录的背景色*/
font-weight:
normal;
}
#navliula{
padding-left:
20px;
width:
174px;
/*padding-left二级目录中文字向右移动,但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#navliula:
link{
color:
#666;text-decoration:
none;
}
#navliula:
visited{
color:
#666;text-decoration:
none;
}
#navliula:
hover{
color:
#333333;
text-decoration:
none;
font-weight:
normal;
background:
#F0F1FD;
/*二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#navli:
hoverul{
left:
auto;
}
#navli.sfhoverul{
left:
auto;
}
#content{
clear:
left;
}
#navul.collapsed{
display:
none;
}
#PARENT{
width:
174px;
}
-->
#CCE3F5;color: #FFF;">
-- varLastLeftID=""; functionmenuFix(){ varobj=document.getElementById("nav").getElementsByTagName("li"); for(vari=0;i obj[i].onmouseover=function(){ this.className+=(this.className.length>0? "": "")+"sfhover"; } obj[i].onMouseDown=function(){ this.className+=(this.className.length>0? "": "")+"sfhover"; } obj[i].onMouseUp=function(){ this.className+=(this.className.length>0? "": "")+"sfhover"; } obj[i].onmouseout=function(){ this.className=this.className.replace(newRegExp("(? |^)sfhover\\b"),""); } } } functionDoMenu(emid) { varobj=document.getElementById(emid); obj.className=(obj.className.toLowerCase()=="expanded"? "collapsed": "expanded"); if((LastLeftID! ="")&&(emid! =LastLeftID))//关闭上一个Menu { document.getElementById(LastLeftID).className="collapsed"; } LastLeftID=emid; } functionGetMenuID() { varMenuID=""; var_paramStr=newString(window.location.href); var_sharpPos=_paramStr.indexOf("#"); if(_sharpPos>=0&&_sharpPos<_paramStr.length-1) { _paramStr=_paramStr.substring(_sharpPos+1,_paramStr.length); } else { _paramStr=""; } if(_paramStr.length>0) { var_paramArr=_paramStr.split("&"); if(_paramArr.length>0) { var_paramKeyVal=_paramArr[0].split("="); if(_paramKeyVal.length>0) { MenuID=_paramKeyVal[1]; } } } if(MenuID! ="") { DoMenu(MenuID) } } GetMenuID();//*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果 menuFix(); -->
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 导航 按钮 实现