jQuery实现可高亮显示的二级CSS菜单效果


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jQuery实现可高亮显示的二级CSS菜单效果。分享给大家供大家参考。具体如下:

这里实现鼠标放在二级菜单上,一级菜单可高亮显示,以指示当前菜单所在的位置,引入了jQuery插件使其在做对简洁度方面优化的非常好,用较少的代码实现想要的功能,分享给大家。

先来看看运行效果截图:

jQuery实现可高亮显示的二级CSS菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>可高亮的二级CSS菜单</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.menu1 a').each(function(i){
  if($(this).attr('class')=='this'||$(this).attr('class')=='this hover'){
   $('.menu2').eq(i).show();
  }
  $(this).mousemove(function(){
   $('.menu1 a').removeClass('this');
   $(this).addClass('this');
   $('.menu2').hide();
   $('.menu2').eq(i).show();
   });
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
a{color:#000;text-decoration:none;}
.menu1{height:30px;background:#1B75C4;}
.menu1 a{display:inline;float:left;height:30px;line-height:30px;color:#fff;margin:0 5px;padding:0 5px;}
.menu1 a:hover,.menu1 a.this,.menu1 a.hover{background:#fff;color:#1B75C4;}
.menu2{height:30px;display:none;}
.menu2 a{display:inline;float:left;height:30px;line-height:30px;margin:0 5px;padding:0 5px;}
.menu2 a:hover{color:#1B75C4;}
</style>
</head>
<body>
<div class="menu">
 <div class="menu1">
  <a class="this" href="javascript:;">网站脚本</a>
  <a href="javascript:;">网页特效</a>
  <a href="javascript:;">大家喜欢的</a>
  <a href="javascript:;">不告诉你</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">ASP</a>
  <a href="javascript:;">PHP</a>
  <a href="javascript:;">CGI</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">菜单特效</a>
  <a href="javascript:;">CSS布局</a>
  <a href="javascript:;">表单特效</a>
  <a href="javascript:;">列表特效</a>
  <a href="javascript:;">浮动层</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">美女</a>
  <a href="javascript:;">小姐</a>
  <a href="javascript:;">金钱</a>
  <a href="javascript:;">游戏</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">秘密</a>
  <a href="javascript:;">年龄</a>
  <a href="javascript:;">其它</a>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
详解JS数值Number类型
Feb 07 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 #Javascript
JavaScript常用标签和方法总结
Sep 01 #Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 #Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 #Javascript
Jquery常用的方法汇总
Sep 01 #Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 #Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 #Javascript
You might like
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
使用tensorflow实现线性回归
2018/09/08 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python中断多重循环的思路总结
2019/10/04 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
四年大学生活的自我评价范文
2014/02/07 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
通用员工手册范本
2015/05/14 职场文书