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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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/11/25 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Python性能优化技巧
2015/03/09 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python模块文件结构代码详解
2018/02/03 Python
python基础教程项目三之万能的XML
2018/04/02 Python
windows下python安装小白入门教程
2018/09/18 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
对python中list的五种查找方法说明
2020/07/13 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
人事文员岗位职责
2014/02/16 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
跑操口号
2014/06/12 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
领导班子整改方案
2014/10/25 职场文书
文明倡议书
2015/01/19 职场文书
三行辞职书范文
2015/02/26 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android