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 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
js实现移动端吸顶效果
Jan 08 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php strftime函数的详细用法
2018/06/21 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python实现矩阵乘法的方法
2015/06/28 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
数据库笔试题
2013/05/09 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
大专生的学习自我评价
2013/12/04 职场文书
法语专业求职信
2014/07/20 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
公司租车协议书
2015/01/29 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android