来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

js实现的黑背景灰色二级导航菜单效果代码,JS实

正文实例陈述了js完结的黑背景雪青二级导航菜单效率代码。分享给大家供我们参考。具体如下:

正文实例呈报了JS完毕的简要二级导航菜单雏形效果。分享给大家供大家参照他事他说加以考察。具体如下:

那是一款js达成的黑背景水绿二级导航菜单,包容IE6、firefox的js+css横向二极导航菜单。挺轻便,不过很清爽,二级菜单是程度显得在主菜单的江湖,选择流行的微软雅黑字体,若不想用这种字体,可换到暗许的草书就能够。

那是叁个二级导航菜单雏形,风格简洁,圆角形,也是眼下可比盛行的菜系功用,帮助二级,演示内容是随意搞的,希望大家爱怜。

运作效果截图如下:

运营效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

切实代码如下:

切切实实代码如下:

<!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">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<TITLE>兼容IE6、firefox的灰色横向二极导航菜单代码</TITLE>
<style type=text/css>
BODY { background:#26272b;}
a{ color:#FFFFFF}
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{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
#mainmenu_top UL{}
#mainmenu_top UL LI {FLOAT: left;}
#mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
#mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
#mainmenu_bottom UL LI A:hover {text-decoration: underline;}
</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>
 <div class="menu-lft"><div class="menu-rht">
 <UL>
 <LI class="home"><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI>
 <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI>
 <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI>
 <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>脚本下载</A> </LI>
 <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
 <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
 <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI>
 <LI><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>网络营销</A> </LI>
 <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
 </DIV></DIV>
 </DIV>
<!--子导航导航开始-->
 <DIV id=mainmenu_bottom>
 <UL class=hide id=mb1>
 <LI><A href="#">2012年元旦网站推广惊喜促销价</A> </LI>
 <LI><A href="#">网站公告:脚本之家7年了</A> </LI> </UL>
 <UL class=hide id=mb2>
 <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=mb3>
 <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>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
 <UL class=hide id=mb4>
 <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=mb5>
 <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=mb6>
 <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=mb7>
 <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=mb8 style="DISPLAY: none">
 <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=mb9>
 <LI><A href="#">脚本之家</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>
<script>
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" ); 
thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; 
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)
 if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
 {
  getObject("mm1").className="menuhover"
  getObject("mb1").className = "";
 }
 else if(thisUPage_s=="domain")
 {
  getObject("mm2").className="menuhover"
  getObject("mb2").className = "";
 }
 else if(thisUPage_s=="hosting")
 {
  getObject("mm3").className="menuhover"
  getObject("mb3").className = "";
 } 
 else if(thisUPage_s=="mail")
 {
  getObject("mm4").className="menuhover"
  getObject("mb4").className = "";
 }
 else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
  getObject("mm5").className="menuhover"
  getObject("mb5").className = "";
 }
 else if(thisUPage_s=="promotion"){
  getObject("mm6").className="menuhover"
  getObject("mb6").className = "";
 }
 else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
  getObject("mm7").className="menuhover"
  getObject("mb7").className = "";
 }
 else if(thisUPage_s=="benefit"){
  getObject("mm8").className="menuhover"
  getObject("mb8").className = "";
 }
 else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
  getObject("mm9").className="menuhover"
  getObject("mb9").className = "";
 }
 else
 {
  getObject("mm1").className="";
  getObject("mb1").className = "";
 }
}
window.load=mmenuURL()
</script>
</DIV>
</DIV>
</body>
</html>
<!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">
<head>
<title>二级导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css"> 
<!-- 
*{font-size:12px;} 
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} 
UL{list-style-type:none; margin:0px;} 
.ttl{height:18px;} 
.ctt{ 
height:auto; 
padding:6px; 
clear:both; 
border: 1px solid #CCCCCC; 
} 
.w936{ 
width:936px; 
clear:both; 
height: 120px; 
margin-top: 20px; 
margin-right: 0; 
margin-bottom: 2px; 
margin-left: 0; 
} 
.normaltab { 
color:#1F3A87; 
} 
.hovertab { 
color:#FF0000; 
background-color: #99CC00; 
} 
.dis{display:block;} 
.undis{display:none;} 
.tabs { 
width:100%; 
background:#BBD9EE; 
font-size:93%; 
line-height:normal; 
} 
.tabs ul { 
margin:0; 
padding:10px 10px 0 50px; 
list-style:none; 
} 
.tabs li { 
display:inline; 
margin:0; 
padding:0; 
cursor: pointer; 
} 
.tabs a { 
float:left; 
background:url("images/tableft.gif") no-repeat left top; 
margin:0; 
padding:0 0 0 4px; 
text-decoration:none; 
} 
.tabs a span { 
float:left; 
display:block; 
background:url("images/tabright.gif") no-repeat right top; 
padding:5px 15px 4px 6px; 
color:#666; 
} 
.tabs a span {float:none;} 
.tabs a:hover span { 
color:#FF9834; 
} 
.tabs a:hover { 
background-position:0% -42px; 
} 
.tabs a:hover span { 
background-position:100% -42px; 
} 
--> 
</style> 
<script type="text/javascript" language="javascript"> 
<!-- 
function g(o){return document.getElementById(o);} 
function HoverLi(n) 
{ 
for(var i=1;i<=8;i++){g('tb_'+i);g('tbc_0'+i).className='undis';} 
g('tbc_0'+n).className='dis';g('tb_'+n); 
} 
//--> 
</script> 
</head>
<body>
<div class="w936"> 
 <div id="tb_" class="tb_ tabs"> 
  <ul> 
   <li id="tb_1" onmouseover="HoverLi(1);"><a href="#">ASP</a></li> 
   <li id="tb_2" onmouseover="HoverLi(2);"><a href="#">PHP</a></li> 
   <li id="tb_3" onmouseover="HoverLi(3);"><a href="#">.NET</a></li> 
   <li id="tb_4" onmouseover="HoverLi(4);"><a href="#">JSP</a></li> 
   <li id="tb_5" onmouseover="HoverLi(5);"><a href="#">JAVA</a></li> 
   <li id="tb_6" onmouseover="HoverLi(6);"><a href="#">DELPHI</a></li> 
   <li id="tb_7" onmouseover="HoverLi(7);"><a href="#">VC++</a></li> 
   <li id="tb_8" onmouseover="HoverLi(8);"><a href="#">AJAX</a></li> 
  </ul> 
 </div> 
 <div class="ctt"> 
  <div class="dis" id="tbc_01">ASP的内容一</div> 
  <div class="undis" id="tbc_02">PHP的内容二</div> 
  <div class="undis" id="tbc_03">.NET的内容三</div> 
  <div class="undis" id="tbc_04">JSP的内容四</div> 
  <div class="undis" id="tbc_05">JAVA的内容五</div> 
  <div class="undis" id="tbc_06">DELPHI的内容六</div> 
  <div class="undis" id="tbc_07">VC++的内容七</div> 
  <div class="undis" id="tbc_08">AJAX的内容</div> 
 </div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计具备帮忙。

期望本文所述对我们的JavaScript程序设计具备补助。

你或者感兴趣的小说:

  • 以JavaScript来完成WordPress中的二级导航菜单的方法
  • JS完毕的洗练二级导航菜单雏形效果
  • JS达成草绿大气的二级导航菜单功用
  • JS+CSS完成精粹的二级导航作用代码
  • 听新闻说dropdown.js达成的六款好看大方的二级导航菜单
  • js达成横向扩大开的二级导航菜单代码
  • JavaScript兑现简单的二级导航菜单实例
  • JS完成仿京东天猫竖排二级导航
  • js达成二级导航功效

你大概感兴趣的稿子:

  • 以JavaScript来兑现WordPress中的二级导航菜单的主意
  • JS落成浅绿大气的二级导航菜单成效
  • JS+CSS达成完美的二级导航作用代码
  • 基于dropdown.js达成的五款雅观大气的二级导航菜单
  • js完毕横向伸展开的二级导航菜单代码
  • js达成的黑背景群青二级导航菜单成效代码
  • JavaScript落到实处轻巧的二级导航菜单实例
  • JS完成仿京东天猫商城竖排二级导航
  • js完成二级导航功效

本文由六合联盟网发布于系统操作,转载请注明出处:js实现的黑背景灰色二级导航菜单效果代码,JS实

关键词: