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 相关文章推荐
JS模块与命名空间的介绍
Mar 22 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python实现list反转实例汇总
2014/11/11 Python
python静态方法实例
2015/01/14 Python
Python中的多重装饰器
2015/04/11 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python