JQ 实现无限分级导航菜单

最新推荐文章于 2021-05-31 19:38:28 发布
最新推荐文章于 2021-05-31 19:38:28 发布
阅读量607 收藏
点赞数
文章标签： java mybatis springmvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linkedin_38250634/article/details/69942815
版权
Js代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <script type="text/javascript" src="jquery-1.10.1.min.js"></script>  
  7. <link rel="stylesheet" href="base.css" />  
  8. <style type="text/css">  
  9. ul.nav{ width: 840px; margin: 20px auto;}  
  10. ul.nav li{ width: 200px; text-align:center;}  
  11. ul.nav > li{ float: left; margin-right:10px;}  
  12. ul.nav li a{height: 40px; line-height: 40px; display: block;}  
  13. ul.nav > li > a{ background: #72a7ff;}  
  14. ul.nav > li > ul > li a{ background: #ffd9d9;}  
  15. ul.nav > li a:hover,.choice{ background: #ffc0c0!important;}  
  16. ul > li > ul{ display: none;}  
  17. ul > li.on > ul{ display: block;}  
  18. ul.nav li{ position: relative;}  
  19. ul.nav > li > ul > li ul{ position:  absolute; top: 0; right: -200px;}  
  20. ul.nav a.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(arrows.png) no-repeat center center;}  
  21. </style>  
  22. </head>  
  23. <body>  
  24. <script type="text/javascript">  
  25. $(function(){  
  26.     $("ul.nav li").hover(function(){  
  27.         $(this).addClass("on");  
  28.     },function(){  
  29.         $(this).removeClass("on");  
  30.     }); 获取地址 
  31.     $("ul.nav li").hover(function(){  
  32.         $(this).parent("ul").siblings("a").addClass("choice");  
  33.     },function(){  
  34.         $(this).parent("ul").siblings("a").removeClass("choice");  
  35.     });  
  36.     if ($("ul.nav li").find("ul") .html()!="") {  
  37.         $("ul.nav li").parent("ul").siblings("a").append("<a class='sub'></a>");  
  38.     }  
  39. });  
  40. </script>  
  41. <ul class="nav">  
  42.   <li><a href="###">我的网站</a>  
  43.     <ul>  
  44.         <li><a href="###">2级分类</a>  
  45.           <ul>  
  46.             <li><a href="###">3级分类</a>  
  47.               <ul>  
  48.                 <li><a href="###">4级分类</a>  
  49.                   <ul>  
  50.                     <li><a href="###">5级分类</a></li>  
  51.                     <li><a href="###">5级分类</a></li>  
  52.                     <li><a href="###">5级分类</a></li>  
  53.                     <li><a href="###">5级分类</a></li>  
  54.                   </ul>  
  55.                 </li>  
  56.                 <li><a href="###">4级分类</a></li>  
  57.                 <li><a href="###">4级分类</a></li>  
  58.                 <li><a href="###">4级分类</a></li>  
  59.               </ul>  
  60.             </li>  
  61.             <li><a href="###">3级分类</a></li>  
  62.             <li><a href="###">3级分类</a></li>  
  63.             <li><a href="###">3级分类</a></li>  
  64.           </ul>  
  65.         </li>  
  66.         <li><a href="###">2级分类</a>  
  67.           <ul>  
  68.             <li><a href="###">3级分类</a></li>  
  69.             <li><a href="###">3级分类</a></li>  
  70.             <li><a href="###">3级分类</a></li>  
  71.             <li><a href="###">3级分类</a></li>  
  72.           </ul>  
  73.         </li>  
  74.         <li><a href="###">2级分类</a>  
  75.           <ul>  
  76.             <li><a href="###">3级分类</a></li>  
  77.             <li><a href="###">3级分类</a></li>  
  78.             <li><a href="###">3级分类</a></li>  
  79.             <li><a href="###">3级分类</a></li>  
  80.           </ul>  
  81.         </li>  
  82.         <li><a href="###">2级分类</a>  
  83.           <ul>  
  84.             <li><a href="###">3级分类</a></li>  
  85.             <li><a href="###">3级分类</a></li>  
  86.             <li><a href="###">3级分类</a></li>  
  87.             <li><a href="###">3级分类</a></li>  
  88.           </ul>  
  89.         </li>  
  90.     </ul>  
  91.   </li>  获取地址
  92.   <li><a href="###">我的网站</a>  
  93.     <ul>  
  94.         <li><a href="###">2级分类</a>  
  95.           <ul>  
  96.             <li><a href="###">3级分类</a></li>  
  97.             <li><a href="###">3级分类</a></li>  
  98.             <li><a href="###">3级分类</a></li>  
  99.             <li><a href="###">3级分类</a></li>  
  100.           </ul>  
  101.         </li>  
  102.         <li><a href="###">2级分类</a>  
  103.           <ul>  
  104.             <li><a href="###">3级分类</a></li>  
  105.             <li><a href="###">3级分类</a></li>  
  106.             <li><a href="###">3级分类</a></li>  
  107.             <li><a href="###">3级分类</a></li>  
  108.           </ul>  
  109.         </li>  
  110.         <li><a href="###">2级分类</a>  
  111.           <ul>  
  112.             <li><a href="###">3级分类</a></li>  
  113.             <li><a href="###">3级分类</a></li>  
  114.             <li><a href="###">3级分类</a></li>  
  115.             <li><a href="###">3级分类</a></li>  
  116.           </ul>  
  117.         </li>  
  118.         <li><a href="###">2级分类</a>  
  119.           <ul>  
  120.             <li><a href="###">3级分类</a></li>  
  121.             <li><a href="###">3级分类</a></li>  
  122.             <li><a href="###">3级分类</a></li>  
  123.             <li><a href="###">3级分类</a></li>  
  124.           </ul>  
  125.         </li>  
  126.     </ul>  
  127.   </li>  
  128.   <li><a href="###">我的网站</a>  
  129.     <ul>  
  130.         <li><a href="###">2级分类</a>  
  131.           <ul>  
  132.             <li><a href="###">3级分类</a></li>  
  133.             <li><a href="###">3级分类</a></li>  
  134.             <li><a href="###">3级分类</a></li>  
  135.             <li><a href="###">3级分类</a></li>  
  136.           </ul>  
  137.         </li>  
  138.         <li><a href="###">2级分类</a>  
  139.           <ul>  
  140.             <li><a href="###">3级分类</a></li>  
  141.             <li><a href="###">3级分类</a></li>  
  142.             <li><a href="###">3级分类</a></li>  
  143.             <li><a href="###">3级分类</a></li>  
  144.           </ul>  
  145.         </li>  
  146.         <li><a href="###">2级分类</a>  
  147.           <ul>  
  148.             <li><a href="###">3级分类</a></li>  
  149.             <li><a href="###">3级分类</a></li>  
  150.             <li><a href="###">3级分类</a></li>  
  151.             <li><a href="###">3级分类</a></li>  
  152.           </ul>  
  153.         </li>  
  154.         <li><a href="###">2级分类</a>  
  155.           <ul>  
  156.             <li><a href="###">3级分类</a></li>  
  157.             <li><a href="###">3级分类</a></li>  
  158.             <li><a href="###">3级分类</a></li>  
  159.             <li><a href="###">3级分类</a></li>  
  160.           </ul>  
  161.         </li>  
  162.     </ul>  
  163.   </li>  
  164.   <li><a href="###">我的网站</a>  
  165.     <ul>  
  166.         <li><a href="###">2级分类</a>  
  167.           <ul>  
  168.             <li><a href="###">3级分类</a></li>  
  169.             <li><a href="###">3级分类</a></li>  
  170.             <li><a href="###">3级分类</a></li>  
  171.             <li><a href="###">3级分类</a></li>  
  172.           </ul>  
  173.         </li>  
  174.         <li><a href="###">2级分类</a>  
  175.           <ul>  
  176.             <li><a href="###">3级分类</a></li>  
  177.             <li><a href="###">3级分类</a></li>  
  178.             <li><a href="###">3级分类</a></li>  
  179.             <li><a href="###">3级分类</a></li>  
  180.           </ul>  
  181.         </li>  
  182.         <li><a href="###">2级分类</a>  
  183.           <ul>  
  184.             <li><a href="###">3级分类</a></li>  
  185.             <li><a href="###">3级分类</a></li>  
  186.             <li><a href="###">3级分类</a></li>  
  187.             <li><a href="###">3级分类</a></li>  
  188.           </ul>  
  189.         </li>  
  190.         <li><a href="###">2级分类</a>  
  191.           <ul>  
  192.             <li><a href="###">3级分类</a></li>  
  193.             <li><a href="###">3级分类</a></li>  
  194.             <li><a href="###">3级分类</a></li>  
  195.             <li><a href="###">3级分类</a></li>  
  196.           </ul>  
  197.         </li>  
  198.     </ul>  
  199.   </li>  
  200. </ul>  
  201. </body>  
  202. </html>  

 
效果图：

 

linkedin_38250634
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS左侧无限级菜单导航
11-01
JS左侧无限级菜单导航，兼容各大浏览器，很实用。
导航栏等无限级分类
qq_42081299的博客
08-20 207
$data是包含要分类的所有数据的数组 $pid是父级id，0表示顶级 函数： function getSonNav($data,$pid){     $nav = [];     $key = 0;   foreach($data as $item ){       if($item['pid']== $pid){         $nav[$key] = $item;         $...
ZENCART遍历二级导航菜单
harryxlb的专栏
05-02 1441
$sql = "select c.categories_id, cd.categories_name,c.parent_id from " .     TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd                               where c.categories_id=cd.cat
jquery实现无限分级横向导航菜单的方法
11-27
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下： 1. jquery插件版本代码如下： 复制代码 代码如下:(function($){  $.fn.extend({  droplinemenu: function...
jq实现动画导航菜单.zip
07-04
jq实现动画导航菜单拥有三种不同颜色的动画导航，鼠标经过时带有弹窗提示效果，支持左右滑动。 jq实现动画导航菜单 点击查看演示
jq实现动画导航菜单特效代码
03-20
在本文中，我们将深入探讨如何使用jQuery（通常简称为jq）来实现一款具有动画效果的导航菜单。这个菜单设计独特，包含三种不同的颜色主题，并且在鼠标悬停时能够显示弹窗提示，还支持左右滑动操作。让我们一步步了解...
jq+css实现竖向导航栏
12-04
"jq+css实现竖向导航栏"是指利用JavaScript库jQuery和层叠样式表(CSS)来创建一种垂直布局的导航菜单，这种菜单通常被称为“竖向导航栏”或“侧边栏”。下面将详细介绍如何使用jQuery和CSS来实现这一功能。 首先，让...
js 特效 html 特效 极酷分级导航
08-17
js 特效 html 特效 极酷分级导航 js 特效 html 特效 极酷分级导航
jQuery多级无限级导航下拉菜单代码
04-12
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(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("<span class='sub'></span>"); } }); [removed]
jQuery无限层级下拉框
10-11
jQuery 无限层级 下拉框 多级下拉
水平无限级分类下拉式导航菜单
09-05
水平下拉式导航菜单，无限级菜单，可以无限级自定义，一级菜单，二级，三级
html左侧分级导航,jquery实现无限分级横向导航菜单的方法
weixin_39631572的博客
05-31 359
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：1. jquery插件版本代码如下：(function($){$.fn.extend({droplinemenu: function(configs) {var configs = $.extend({over: 200,out: 100,rightdown:'css/down.gif'},confi...
使用jQuery制作点击展开次级菜单的简单方法
Binary的博客
05-11 920
首先是html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menu</title> <link rel="stylesheet" href="css/menu.css"> </head> <body> <div class="all"> ..
简单多级菜单导航实现jq小插件
樊小二的博客
01-04 767
简单多级菜单导航实现js 简单多级菜单导航插件，觉得不实用的话可以联系我修改哦 js代码如下： ; (function ($, window, document, undefined) { $.fn.setMenu = function (options) { var defaults = { event: &amp;quot;click&amp;quot;, //触发响应事件 ...
jquery多级菜单
weixin_43098668的博客
10-22 1012
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="box/jquery/jquery-3.3.1.js"&
JQ中多级联动下拉选择框
豆豆熊博客
11-14 3526
html代码不多说,贴图出来! 效果如下: 下拉效果如下: 重点来了,js代码是重重之重: $(function () { $(&quot;.formOption&quot;).click(function () { //点击外层,下拉出现 $(this).siblings('.formList').show(); }) $(&quot;.form...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航
weixin_34217773的博客
07-04 411
系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看，但是基于原有树形无限级别的设计，没有办法只能已树形展示 先来看原来的效果 改变后的效果，当然我已经做好了，最后只放出代码供大家参考，其实网上也有这方面的资料，但是不是很好用，我还是自己写了 手风琴一直都是比较漂亮和受欢迎的，但是基于树多级别来说，做起来就比较麻烦，所以我这里也用了手风琴加树...
jq 动态添加.active 实现导航效果
最新发布
05-27
可以通过以下 jQuery ...这段代码会获取当前页面的 URL，然后遍历导航栏中的每个链接，如果链接的 `href` 属性与当前页面 URL 匹配，则为该链接添加 `.active` 类。这样，就可以通过 CSS 样式来呈现导航栏选中状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值