jQuery+CSS实现的高亮显示选中二级菜单效果

最新推荐文章于 2020-06-15 16:27:06 发布
最新推荐文章于 2020-06-15 16:27:06 发布
阅读量118 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/youtianxia/p/4241164.html
版权 
<!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=gb2312" />
    <title>jQuery+CSS实现的高亮显示选中二级菜单效果丨</title>
    <style type="text/css">
    *{margin:0;padding:0}
    body{font-size:14px;}
    ul{margin:0; padding:0; list-style:none;}
    a{text-decoration:none; color:#000;}
    #wrap{position:relative; top:0px;width:876px; height:34px; line-height:34px; margin:0 auto;}
    ul#menu li{float:left; display:block; width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
    ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}
    ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}
    /*子菜单*/
    ul#menu li ul{position:absolute; top:37px;width:90px; display:none;border:1px #CE070E solid;border-top:none;background:skyblue;}
    ul#menu li ul li{float:left;}
    ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}
    ul#menu li ul li a:hover{color:#CE070E; text-decoration:underline}
    ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}
    </style>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(function(){
    $("ul#menu>li:has(ul)").hover(
    function(){
    $(this).children('a').addClass('red').end().find('ul').fadeIn(400);
    },
    function(){
    $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);
    }
    );
    });
    </script>
    </head>
    <body>
    <div id="wrap">
    <ul id="menu">
    <li><a href="#" >CsrCode.Cn</a></li>
    <li><a href="#" >最新动态页</a>
    <ul>
    <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>
    <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>
    </ul>
    </li>
    <li><a href="#" >会员俱乐部</a></li>
    <li><a href="#" >网页教程</a></li>
    </ul>
    </div>
    </body>
    </html>
    <div style="height:200px;"></div><br>如果不显示预览效果，请刷新一下本页面先~~~  所需js文件：<a href="/images/jquery.min.js">jquery.min.js</a><br><hr>

 

转载于:https://www.cnblogs.com/youtianxia/p/4241164.html

weixin_30312557
关注
jQuery实现可高亮显示的二级CSS菜单效果
10-23
主要介绍了jQuery实现可高亮显示的二级CSS菜单效果,涉及基本的jquery鼠标事件及页面元素样式动态改变技巧,需要的朋友可以参考下
CSS实现动态二级菜单实例
06-20
CSS实现动态二级菜单实例
很好用的一个js二级菜单
10-07
这是一个很好用的二级菜单，希望大家好好利用。
jQuery纵向导航菜单效果实现方法
11-28
`siblings().css("display", "none")`隐藏其他二级菜单项，只显示当前选中的二级菜单。 3. 针对二级菜单的定位，代码考虑了不同的场景。`$(window).height()`获取浏览器窗口的高度，`$(this).offset().top`和`$...
web大作业：基于html+css+javascript+jquery实现智能分控网站
08-10
- **导航栏效果**：如下拉菜单、动态高亮当前选中的导航项等功能，这些都可以通过JavaScript轻松实现。 3. **多媒体元素的应用** - **视频**：利用HTML5的`<video>`标签直接嵌入视频内容，无需额外的插件支持。 ...
jQuery基于tnTreeBox.js三级联动菜单多选选中代码.zip
最新发布
09-22
通常，每个选择框都会与一个特定的级联级别相对应，例如一级菜单、二级菜单和三级菜单。 接着，`js`文件夹内包含了jQuery和tnTreeBox.js插件的JavaScript代码。tnTreeBox.js是一个jQuery插件，专门用于创建树形结构...
jQuery动画二级下拉导航菜单特效代码
03-20
默认情况下，二级菜单应该是隐藏的，可以通过CSS的`display:none`实现。 接下来，jQuery的事件监听器用于响应用户的交互。在本例中，当鼠标悬停在导航项上时，会触发`mouseenter`事件。通过`addClass()`方法，我们...
jquery导航栏高亮（二级菜单点击一级保持高亮）
weixin_30278237的博客
05-31 568
<script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $("#navchange a").each(function () { if ((urlstr + '/').indexOf($(this).attr('href')) > -1&a...
最简单的纯js实现点击展开二级菜单功能
热门推荐
well2049的博客
05-16 2万+
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下： 如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这
设置菜单栏中和地址栏对应的活动项高亮
dianchou9307的博客
12-04 121
1 function active() { 2 var menu = $("#menu a"); 3 if (menu != null) { 4 var urlstr = location.href; 5 var urlstatus = false; 6 7 menu.each(functio...
js实现进入二级页面后仍然选中菜单栏中的某个菜单（二级页面与菜单栏绑定）
会飞的象的博客
10-11 3339
  前言 我们通常在点击左侧菜单栏的某个菜单后，会进入一个页面，并将该菜单选中高亮显示； 但是往往在一个页面中，会链接到其他页面，通过第一个页面进入第二个页面后，怎么才能让该菜单仍然是选中且高亮显示的状态呢？ 用到的知识点 1.addclass("active")，给菜单的class添加active属性； 2.var _sitemap = new Array();，定义一个数组，存入当...
一菜单栏页面点击跳转另一菜单的页面时,菜单栏的高亮显示也随之跳转
CYY941027的博客
06-15 778
1.先根据元素选中父页面(".subli",parent.document)2.因为我这边是跳转到第一个菜单栏所以(".subli", parent.document) 2.因为我这边是跳转到第一个菜单栏所以(".subli",parent.document)2.因为我这边是跳转到第一个菜单栏所以(".subli", parent.document).first() 3添加高亮样式$(".subli", parent.document).first( ).addClass(“menuChange”) 4因为
选择主菜单，自动全选子菜单的checkbox操作
gundumw100的专栏
04-10 1721
$('input').click(function(){ if($(this).attr('checked')==true){ $(this).parents('li').children('div').children('input').attr('checked',true);//上一级被选中或上上一级 $(this).closest('li').find('inp
jQuery处理点击父级checkbox所有子级checkbox都选中，取消选中所有子级checkbox都取消...
weixin_34244102的博客
11-19 454
注意，每个foreach标签内部都加一个div用来区分各个层次关系，模板代码如下： <foreach name='node' item='v'> <div class='a' align='center' style='padding-bottom:10px;color:#0000EE'> {$v.title...
响应式二级导航菜单教程：jQuery与CSS3结合实现
"一款基于jQuery和CSS3的响应式二级导航菜单教程，展示了如何创建一个传统的顶部导航，当鼠标悬停时显示二级菜单，并结合了响应式设计，适应不同设备的显示需求。" 在Web开发中，导航菜单是网站的重要组成部分，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值