jquery菜单插件
原理很简单.
涉及到知识点:
1、jquery的position注意这里是jquery的position,不是css的position
offset的概念
2、>的概念。
3、.ulh>li 的优先级要比直接在li上加 .selected的样式高。因为.ulh>li 是元素样式,位于优先级老2.
支持无限分级的菜单,兼容ie8+,chorm,firefox
支持无限的伸缩。支持url效果。图标和样式欢迎大家自行改造。欢迎大家使用。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ulh { padding: 0; list-style: none; font-family: "Microsoft YaHei UI"; font-size: 14px; position: relative; } .ulh >li { float: left; background-color: bisque; border-collapse: collapse; width: 200px; box-sizing: border-box; text-align: center; height: 30px; line-height: 28px; border: 1px solid red; } .ulh >li>a { cursor: pointer; display: block; } .ulv { padding: 0; list-style: none; font-family: "Microsoft YaHei UI"; font-size: 14px; position: relative; } .ulv >li { background-color: bisque; border-collapse: collapse; display: block; width: 200px; box-sizing: border-box; height: 30px; line-height: 28px; border: 1px solid red; } .ulv >li a { cursor: pointer; display: block; } .selected { background-color: #a1ffaa; } </style> <script src="content/javascript/jquery-1.10.2.min.js"></script> <script> $(document).ready(function () { $("#maliang >li").show(); $("#maliang ul").hide(); $("#maliang li ").hover(function () { var x = $(this).position(); var float1 = $(this).css("float"); if (float1.toUpperCase() == "LEFT") { $(this).find(">ul").css({"position": "absolute", "left": x.left, 'top': x.top + 30}); } else { $(this).find(">ul").css({"position": "absolute", "left": x.left + 200, 'top': x.top}); } $(this).find(">ul").slideDown(); $(this).addClass("selected"); }, function () { $(this).find(">ul").slideUp(); $(this).removeClass("selected"); }); }) </script> </head> <body > <ul class="ulh" id="maliang"> <li id="ol" style="position: relative"> <a href="http://www.baidu.com">新闻</a> <ul class="ulv" > <li><a href="">国内</a> </li> <li><a href="">国际</a></li> <li><a href="">娱乐</a></li> </ul> </li> <li id="keji"><a>科技</a> <ul class="ulv" > <li><a href="">互利网</a></li> <li><a href="">软件</a></li> <li><a href="">电子商务</a> <ul class="ulv"> <li><a href="">1.1</a></li> <li><a href="">1.2</a></li> <li><a href="">1.3</a> <ul class="ulv"> <li><a href="">1.1.1</a></li> <li><a href="">1.2.1</a></li> <li><a href="">1.3.1</a><ul class="ulv"> <li><a href="">1.1.1</a></li> <li><a href="">1.2.1</a></li> <li><a href="">1.3.1</a></li> </ul></li> </ul></li> </ul> </li> </ul> </li> <li> <a>娱乐</a> <ul class="ulv" > <li><a href="">亚洲娱乐</a></li> <li><a href="">欧美娱乐</a></li> <li><a href="">全球娱乐资讯</a></li> </ul> </li> <li> <a href="">体育新闻</a></li> </ul> </body> </html>
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器