利用JQuery实现顶部导航栏功能 |
您所在的位置：网站首页 › 导航栏代码vuejs › 利用JQuery实现顶部导航栏功能 |
利用JQuery实现顶部导航栏功能
|
利用JQuery实现顶部导航栏功能
原创
lzqcode 2021-07-16 17:00:52 ©著作权 文章标签 jQuery 文章分类 jQuery 前端开发 ©著作权归作者所有：来自51CTO博客作者lzqcode的原创作品，请联系作者获取转载授权，否则将追究法律责任今天给大家介绍一下，如何利用JQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。 下面举个例子具体介绍一下如何这些功能，案例如下： jQuery三级下拉列表导航菜单 *{margin: 0; padding: 0;} body{ font-size: 12px; } li{ list-style: none;} ul.nav li{ width: 200px; text-align:center;} ul.nav > li{ float: left; margin-right:10px;} ul.nav li h3{height: 40px; line-height: 40px;} ul.nav > li > h3{ background: #72a7ff;} ul.nav > li > ul > li h3{ background: #ffd9d9;} ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;} ul > li > ul{ display: none;} ul > li.on > ul{ display: block;} ul.nav li{ position: relative;} ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;} ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;} $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).addClass("on"); }, function(){ $(this).removeClass("on"); }) }); $(document).ready(function() { $("ul.nav li").hover(function(){ $(this).parent("ul").siblings("h3").addClass("choice"); }, function(){ $(this).parent("ul").siblings("h3").removeClass("choice"); }) }); $(document).ready(function() { if ($("ul.nav li").find("ul") .html()!="") { $("ul.nav li").parent("ul").siblings("h3").append(""); } }); 我的网站 2级分类 3级分类 4级分类 5级分类 5级分类 5级分类 5级分类 4级分类 4级分类 4级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 我的网站 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 我的网站 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 我的网站 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 2级分类 3级分类 3级分类 3级分类 3级分类 运行截图：
实现思路： 1.首先利用css将二级三级菜单隐藏起来。 2.然后利用Jquery实现对菜单的显示和隐藏。 
打赏
赞
收藏
评论
分享
举报
上一篇：利用JQuery实现复杂的顶部导航栏功能 下一篇：利用JQuery实现左侧菜单栏可折叠功能 |
【本文地址】
今日新闻 |
推荐新闻 |