js實現(xiàn)帶圓角的兩級導航菜單效果代碼
更新時間：2015年08月24日 10:06:20 作者：企鵝
這篇文章主要介紹了js實現(xiàn)帶圓角的兩級導航菜單效果代碼,涉及javascript鼠標事件及頁面元素樣式動態(tài)變換技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)帶圓角的兩級導航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款使用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>圓角藍色橫向二級菜單代碼，鼠標經(jīng)過顯示子菜單</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("?"))>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')?'visible':(v=='hide')?'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')">網(wǎng)頁特效</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')">網(wǎng)絡廣告</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="">網(wǎng)絡外包</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="">論壇社區(qū)</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="">網(wǎng)站分類</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="">分類信息網(wǎng)</a></li>
<li><a href="">電子商務</a></li>
<li class="subright"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。2016-03-03
整理Javascript基礎語法學習筆記，之前一系列的文章是跟我學習Javascript，本文就是進一步學習javascript基礎語法，希望大家繼續(xù)關注2015-11-11
這篇文章主要為大家解析了全屏滾動插件fullPage.js使用實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了小程序自定義模板實現(xiàn)吸頂功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
javascript實現(xiàn)多級聯(lián)動下拉菜單的方法
這篇文章主要介紹了javascript實現(xiàn)多級聯(lián)動下拉菜單的方法,通過javascript自定義函數(shù)實現(xiàn)對多級聯(lián)動下拉菜單的操作,是非常實用的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS JQuery獲取data-*屬性值方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
js parseInt的陷阱分析小結(jié),當?shù)谝粋€字符為0時，Js會把它看成一個8進制數(shù)字，其他8進制之外的字符都回被忽略掉。2011-03-03
下面小編就為大家?guī)硪黄狫S常用字符串方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
周日歷是日常生活中不常用到的歷法系統(tǒng)，一般用于政府、商務的會計年度或者學校教學日歷中。本文將利用JavaScript制作個簡單的周日歷，感興趣的可嘗試一下2022-07-07
這篇文章主要介紹了js 解析 JSON 數(shù)據(jù)的方法,結(jié)合簡單實例形式分析了js 解析 JSON 格式數(shù)據(jù)的相關操作技巧與注意事項,需要的朋友可以參考下2020-04-04