js实现带圆角的两级导航菜单效果代码


Posted in Javascript onAugust 24, 2015

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

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

运行效果截图如下:

js实现带圆角的两级导航菜单效果代码

在线演示地址如下:

具体代码如下:

<!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("?"))>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')">网页特效</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程序设计有所帮助。

Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
You might like
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python中执行shell的两种方法总结
2017/01/10 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python的Lambda函数用法详解
2019/09/03 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
车间班长岗位职责
2013/11/30 职场文书
幼教个人求职信范文
2013/12/02 职场文书
商业活动邀请函
2014/02/04 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
群众路线领导对照材料
2014/08/23 职场文书
社区班子对照检查材料
2014/08/27 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
党校党性分析材料
2014/12/19 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python
golang生成并解析JSON
2022/04/14 Golang