suchen

Heim >Web-Frontend >js-Tutorial >js implementiert zweistufigen Navigationsmenüeffektcode mit abgerundeten Ecken_Javascript-Fähigkeiten

js implementiert zweistufigen Navigationsmenüeffektcode mit abgerundeten Ecken_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:43:271245Durchsuche

本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款使用JS做的圆角菜单，支持两级菜单显示，本人比较喜欢的风格，修改使用方便，新手也能上手快。使用有几张圆角图片来修饰了菜单，喜欢的朋友可以下载代码留作收藏使用。真心不错的蓝色导航条代码。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/

具体代码如下：

<!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>
<script> 
function MM_reloadPage(init) {
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("&#63;"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
 if (obj.style) { obj=obj.style; v=(v=='show')&#63;'visible':(v=='hide')&#63;'hidden':v; }
 obj.visibility=v; }
}
</script> 
<style type="text/css">
body {font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}
li{list-style-type:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.topmenu{width:980px;height:42px; margin:0 auto;position: relative;left:0px; top:0px;background:url('images/nav_li_bg.gif') repeat-x right center;}
.topmenu .nav_content{padding-left:25px;background:url('images/nav_li_left.gif') no-repeat;float:left;}
.topmenu .nav_content li{width:126px;height:42px;float:left;line-height:42px;background:url('images/nav_li_line.gif') no-repeat right;text-align:center;font-weight:bold;}
.topmenu .nav_content li a{color:#fff;width:126px;height:42px;display:block;}
.topmenu .nav_content li.current a{width:126px;height:42px;line-height:42px;display:block;color:#fff;}
.topmenu .nav_content li.current a:hover{line-height:42px;}
.topmenu .nav_content li a:hover{line-height:42px;text-decoration:none;background:url('images/nav_li_hover.gif') no-repeat;color:#000;}
.topmenu .nav_content li.end{background: none;}
.topmenu .nav_content li.right{padding-left:47px;width:26px;background:url('images/nav_li_right.gif') no-repeat right top;height:42px;}
.submenu{visibility: hidden;position:absolute;top:42px;left:0;background:url('images/sub_li_bg.gif') repeat-x right top;}
.submenu .subnav{padding-left:33px;background:url('images/sub_li_left.gif') no-repeat;float:left;}
.submenu .subnav li{height40px;float:left;background:url('images/arrow.gif') no-repeat left 15px;}
.submenu .subnav li a{color:#333;display:block;padding:0 12px;line-height:40px; text-decoration:none;}
.submenu .subnav li a:hover{color:#0a4aaa;text-decoration:none;}
.submenu .subnav li.subright{width:33px;background:url('images/sub_li_right.gif') no-repeat right top;height:40px;}
#Layer1{left:30px;}
#Layer2{left:80px;}
#Layer3{left:280px;}
#Layer4{left:400px;}
#Layer5{left:auto;right:80px;}
</style>
</head>
<body>
<div style="height:70px;"></div>
<div class="topmenu">
<div class="nav_content">
<ul>
<li><a href="#">首　页</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">网页特效</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">电子商务</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')">导航条</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')">网络广告</a></li>
<li><a href="#" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')">搜索引擎</a></li>
<li><a href="#" >关于我们</a></li>
<li class="right"></li>
</ul>
</div>
<div id="Layer1" class="submenu" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">源码下载</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">电子商务</a></li>
  <li><a href="">营销外包</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer2" class="submenu" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">编程书籍</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">商务人才</a></li>
  <li><a href="">网络外包</a></li>
  <li><a href="">电子商务</a></li>
  <li><a href="">导航条代码</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer3" class="submenu" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">论坛社区</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">电子商务人才</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer4" class="submenu" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">教程文章</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">网站分类</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
<div id="Layer5" class="submenu" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')"> 
 <div class="subnav">
 <ul>
 <li><a href="">最新更新</a></li>
  <li><a href="">导航条代码</a></li>
  <li><a href="">分类信息网</a></li>
  <li><a href="">电子商务</a></li>
  <li class="subright"></li>
 </ul>
</div>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert den Effekt des Markierens der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken auf_jqueryNächster Artikel：jQuery implementiert den Effekt des Markierens der aktuellen Menüposition (Hintergrundhervorhebungsmenü) nach dem Klicken auf_jquery

In Verbindung stehende Artikel

Mehr sehen