js实现具有高亮显示效果的多级菜单代码


Posted in Javascript onSeptember 01, 2015

本文实例讲述了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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>具有高亮效果的菜单</title>
<style type="text/css">
body{ font:12px/22px "微软雅黑","宋体"; background:url(); color:#5d5d5d;}
*{ padding:0; margin:0;}
a{outline:none; text-decoration:none; color:#5d5d5d;}
a:active{noOutline:expression(this.onFocus=this.blur());}
:focus{outline:0;}
a img{ border:none;}
ul li{ list-style:none;}
.t_nav{ height:35px; line-height:35px; background:#008c9c url() no-repeat 720px 5px; margin-bottom:20px;}
.dropdown{ width:690px; padding-left:10px; float:left; position:relative; z-index:100;}
.dropdown li{ height:35px; font-size:14px; float:left; zoom:1;}
.dropdown li a{ color:#FFF;}
.t_nav .sou_suo{ width:300px; float:left; height:30px; padding-top:5px; overflow:hidden; line-height:22px;}
.t_nav .sou_suo span{ display:inline-block;}
.d_s_1{ width:195px; margin-left:25px;}
.d_s_1 input{ width:165px; background:none; border:none;}
.d_s_2 input{ width:48px; border:none; cursor:pointer; background:none;}
ul.dropdown li:last-child a { border-right: none; } 
ul.dropdown li.hover,ul.dropdown li:hover {position: relative;}
ul.dropdown li.hover a{ color:#008C9C;}
ul.dropdown ul{visibility: hidden;position: absolute;top: 35px;left: 1px;z-index:20;}
ul.dropdown ul li{background:#008C9C; border-top: 2px solid #ccc; float: none; height:auto;line-height:25px; color:#FFF;}
ul.dropdown li:hover > ul{ visibility: visible; }
#Nav .sub_menu li{ background:none; _width:76px; _overflow:hidden;}
body #Nav .hover a{ background:#008c9c; color:#fff;}
body #Nav a{ display:inline-block; width:auto; height:35px; padding:0 10px; margin:0 1px;}
body #Nav a:hover,body #Nav .cur a{ background-color:#fff; color:#008c9c}
body #Nav .sub_menu li.cur a{ background:#008c9c; color:#fff;}
body #Nav .sub_menu a{ margin:0; background:#008c9c; color:#fff; line-height:30px; height:30px;}
body #Nav .sub_menu .hover a{ background:#008c9c; color:#fff;}
body #Nav .sub_menu .hover a:hover{ background:#fff; color:#008c9c;}
body #Nav .cur{ position:relative;}
body #Nav .cur .sub_menu{ position:absolute;}
</style>
</head>
<body>
<div class="t_nav">
  <ul class="dropdown" id="Nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">新闻资讯</a>
   <ul class="sub_menu">
   <li><a href="#">公司新闻</a></li>
   <li><a href="#">图片新闻</a></li>
   <li><a href="#">媒体聚焦</a></li>
   <li><a href="#">行业资讯</a></li>
  </ul>
  </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>
 </ul>
<script language="javascript">
function setCookie(name,value,time_sec){
 var Days = 30;
 var exp = new Date();
 exp.setTime(exp.getTime() + time_sec*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + ";";
}
function getCookie(name){
 var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
 if(arr != null) return unescape(arr[2]); return null;
}
var o=document.getElementById("Nav").getElementsByTagName("li");
var m=getCookie("NavIndex");
if(!isNaN(m) && m!=null){
 o[m].className="cur";
}else{
 o[0].className="cur";
}
for(var n=0;n<o.length;n++){
 o[n].onclick=function(){
  for(var i=0;i<o.length;i++){
   o[i].className="";
   o[i].index=i;
   }
  this.className="cur";
  setCookie("NavIndex",this.index,3600*24*365);
 }
}
</script>
 <div class="sou_suo">
  <span class="d_s_1"><input name="" type="text" /></span>
  <span class="d_s_2"><input name="" type="button" /></span>
 </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 #Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 #Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 #Javascript
You might like
用PHP调用数据库的存贮过程
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php实现加减法验证码代码
2014/02/14 PHP
php计算整个目录大小的方法
2015/06/19 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
js实现左右轮播图
2020/01/09 Javascript
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python判断完全平方数的方法
2018/11/13 Python
python使用udp实现聊天器功能
2018/12/10 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
明星邀请函
2015/02/02 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
荒岛余生观后感
2015/06/09 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电