css+js打造网上经典蓝色二级横向滑动导航菜单代码资源-CSDN文库

共7个文件

gif：4个

jpg：1个

js：1个

二级横向滑动导航菜单代码

5星 · 超过95%的资源需积分: 12 102 浏览量 2010-10-11 09:45:55 上传评论 2 收藏 5KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

menu15.rar （7个子文件）

hongsenav.rar

images

main_nav.js 2KB

nav_bg.gif 468B

mainmenu_s.gif 638B

mainmenu_bg.jpg 573B

mainmenu_h.gif 286B

menulink_bg_normal.gif 313B

index.html 10KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <TITLE>经典蓝色二级横向滑动导航菜单 - 零度对策www.duice.net</TITLE> <meta name="keywords" content="HTML+CSS导航菜单" /> <meta name="description" content="HTML+CSS导航菜单" /> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> <style type=text/css> BODY {} UL { LIST-STYLE-TYPE: none; padding:0px; margin:0px; } LI { FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "宋体", Arial, Verdana; } .hide { DISPLAY: none } #mainmenu_top UL LI .menuhover { BACKGROUND: url(images/mainmenu_s.gif) no-repeat; COLOR: #fff; } #mainmenu_top UL LI A { MARGIN-TOP: 2px; CURSOR: pointer; PADDING-TOP: 8px; HEIGHT: 20px; text-decoration: none; } #mainmenu_top { width:100%; HEIGHT: 28px; display:block; overflow:hidden; } #mainmenu_top UL LI {FLOAT: left} #mainmenu_top UL LI A { WIDTH: 81px; height:auto; DISPLAY: block; COLOR: #666666; TEXT-ALIGN: center; FONT-WEIGHT: bold; BACKGROUND: url(images/mainmenu_h.gif) no-repeat; } #mainmenu_bottom { width:100%; height:32px; line-height:32px; display:block; overflow:hidden; BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x } #mainmenu_bottom .mainmenu_rbg { HEIGHT: 32px; COLOR: #fff; MARGIN-LEFT: 0px; PADDING: 0px 0px 0px 5px; BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%; } #mainmenu_bottom UL {} #mainmenu_bottom UL LI { PADDING-LEFT: 8px; FLOAT: left; MARGIN-LEFT: 7px; HEIGHT: 32px; } #mainmenu_bottom UL LI.se { FLOAT: left; MARGIN-LEFT: 7px; HEIGHT: 32px; PADDING-LEFT: 8px; BACKGROUND: url(images/menulink_bg_l.gif) no-repeat; } #mainmenu_bottom UL LI A { COLOR: #fff; LINE-HEIGHT: 32px; PADDING-RIGHT: 18px; DISPLAY: block; text-decoration: none; BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%; } #mainmenu_bottom UL LI A:hover { BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%; color: #FFCC00; } #mainmenu_bottom UL LI A.se { COLOR: #fff; LINE-HEIGHT: 32px; PADDING-RIGHT: 18px; DISPLAY: block; BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%; } </style> <SCRIPT type=text/javascript> var waitting = 1; var secondLeft = waitting; var timer; var sourceObj; var number; function getObject(objectId)//获取id的函数 { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(objectId); } else if (document.all && document.all(objectId)) { // MSIE 4 DOM return document.all(objectId); } else if (document.layers && document.layers[objectId]) { // NN 4 DOM.. note: this won't find nested layers return document.layers[objectId]; } else { return false; } } function SetTimer()//主导航时间延迟的函数 { for(j=1; j <10; j++){ if (j == number){ if(getObject("mm"+j)!=false){ getObject("mm"+ number).className = "menuhover"; getObject("mb"+ number).className = ""; } } else{ if(getObject("mm"+j)!=false){ getObject("mm"+ j).className = ""; getObject("mb"+ j).className = "hide"; } } } } function CheckTime()//设置时间延迟后 { secondLeft--; if ( secondLeft == 0 ) { clearInterval(timer); SetTimer(); } } function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟 { number = Num; sourceObj = thisobj; secondLeft = 1; timer = setTimeout('CheckTime()',100); } function OnMouseLeft()//主导航鼠标移出函数,清除时间函数 { clearInterval(timer); } </SCRIPT>  <DIV id=mainmenu_body>  <DIV id=mainmenu_top> <UL> <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>网站首页</A> </LI> <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>JS代码</A> </LI> <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>电子商务</A> </LI> <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>零度对策</A> </LI> <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>建站技巧</A> </LI> <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>CSS技巧</A> </LI> <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>CSS导航菜单</A> </LI> <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>网络营销</A> </LI> <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="http://www.duice.net/html/list_622.html" target=_parent>SEO优化</A> </LI></UL> </DIV>  <DIV id=mainmenu_bottom> <DIV class=mainmenu_rbg> <UL class=hide id=mb1> <LI><A href="http://www.duice.net/html/list_622.html">零度对策-中小企业网络营销专家</A> </LI> <LI><A href="http://www.duice.net/html/list_622.html">网站公告：零度对策征集友情链接</A> </LI> </UL> <UL class=hide id=mb2> <LI style="DISPLAY: none"><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>网页特效</A> </LI></UL> <UL class=hide id=mb3> <LI style="DISPLAY: none"><A href="#" target=_parent>零度对策</A> </LI> <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>零度对策</A> </LI> <LI><A href="#" target=_parent>网络营销</A> </LI> <LI><A href="#" target=_parent>网络营销</A> </LI> <LI><A href="#" target=_parent>网络营销</A> </LI> <LI><A href="#" target=_parent>网络营销</A> </LI> <LI><A href="#" target=_parent>网络营销</A> </LI> <LI><A href="#" target=_parent>网页特效</A> </LI></UL> <UL class=hide id=mb4>

评论收藏

内容反馈