原理很简单.

涉及到知识点：

1、jquery的position注意这里是jquery的position，不是css的position

offset的概念

2、>的概念。

3、.ulh>li 的优先级要比直接在li上加 .selected的样式高。因为.ulh>li  是元素样式，位于优先级老2.

支持无限分级的菜单，兼容ie8+，chorm，firefox

支持无限的伸缩。支持url效果。图标和样式欢迎大家自行改造。欢迎大家使用。

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .ulh {
  8.             padding: 0;
  9.             list-style: none;
  10.             font-family: "Microsoft YaHei UI";
  11.             font-size: 14px;
  12.             position: relative;
  13.         }
  14.         .ulh >li {
  15.             float: left;
  16.             background-color: bisque;
  17.             border-collapse: collapse;
  18.             width: 200px;
  19.             box-sizing: border-box;
  20.             text-align: center;
  21.             height: 30px;
  22.             line-height: 28px;
  23.             border: 1px solid red;
  24.         }
  25.         .ulh >li>a {
  26.             cursor: pointer;
  27.             display: block;
  28.         }
  29.         .ulv {
  30.             padding: 0;
  31.             list-style: none;
  32.             font-family: "Microsoft YaHei UI";
  33.             font-size: 14px;
  34.             position: relative;
  35.         }
  36.         .ulv >li {
  37.             background-color: bisque;
  38.             border-collapse: collapse;
  39.             display: block;
  40.             width: 200px;
  41.             box-sizing: border-box;
  42.             height: 30px;
  43.             line-height: 28px;
  44.             border: 1px solid red;
  45.         }
  46.         .ulv >li a {
  47.             cursor: pointer;
  48.             display: block;
  49.         }
  50.         .selected {
  51.             background-color: #a1ffaa;
  52.         }
  53.     </style>
  54.     <script src="content/javascript/jquery-1.10.2.min.js"></script>
  55.  
  56.     <script>
  57.     $(document).ready(function () {
  58.         $("#maliang >li").show();
  59.         $("#maliang ul").hide();
  60.  
  61.         $("#maliang li ").hover(function () {
  62.             var x = $(this).position();
  63.             var float1 = $(this).css("float");
  64.             if (float1.toUpperCase() == "LEFT") {
  65.                 $(this).find(">ul").css({"position": "absolute", "left": x.left, 'top': x.top + 30});
  66.             }
  67.             else {
  68.                 $(this).find(">ul").css({"position": "absolute", "left": x.left + 200, 'top': x.top});
  69.             }
  70.             $(this).find(">ul").slideDown();
  71.  
  72.             $(this).addClass("selected");
  73.         }, function () {
  74.             $(this).find(">ul").slideUp();
  75.             $(this).removeClass("selected");
  76.         });
  77.     })
  78.  
  79.     </script>
  80. </head>
  81. <body >
  82. <ul class="ulh" id="maliang">
  83.     <li id="ol" style="position: relative">
  84.         <a href="http://www.baidu.com">新闻</a>
  85.         <ul class="ulv" >
  86.             <li><a href="">国内</a>
  87.             </li>
  88.             <li><a href="">国际</a></li>
  89.             <li><a href="">娱乐</a></li>
  90.         </ul>
  91.     </li>
  92.     <li id="keji"><a>科技</a>
  93.         <ul class="ulv" >
  94.             <li><a href="">互利网</a></li>
  95.             <li><a href="">软件</a></li>
  96.             <li><a href="">电子商务</a>
  97.                 <ul class="ulv">
  98.                     <li><a href="">1.1</a></li>
  99.                     <li><a href="">1.2</a></li>
  100.                     <li><a href="">1.3</a>
  101.                         <ul class="ulv">
  102.                             <li><a href="">1.1.1</a></li>
  103.                             <li><a href="">1.2.1</a></li>
  104.                             <li><a href="">1.3.1</a><ul class="ulv">
  105.                                 <li><a href="">1.1.1</a></li>
  106.                                 <li><a href="">1.2.1</a></li>
  107.                                 <li><a href="">1.3.1</a></li>
  108.                             </ul></li>
  109.                         </ul></li>
  110.                 </ul>
  111.             </li>
  112.         </ul>
  113.     </li>
  114.     <li>   <a>娱乐</a>
  115.         <ul class="ulv" >
  116.             <li><a href="">亚洲娱乐</a></li>
  117.             <li><a href="">欧美娱乐</a></li>
  118.             <li><a href="">全球娱乐资讯</a></li>
  119.         </ul>
  120.     </li>
  121.  
  122.     <li> <a href="">体育新闻</a></li>
  123.  
  124. </ul>
  125. </body>
  126. </html>

jquery菜单插件的更多相关文章

  1. 35+个实用jQuery菜单插件

    应用jQuery菜单插件可以让浏览者在浏览你的网页时获得最好的动态导航.jQuery是一个轻量级.跨浏览器的JavaScript框架(库),效果非常给力,它强调并简化了JavaScript.CSS和H ...

  2. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

  3. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  4. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  5. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  6. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  7. 网站开发常用jQuery插件总结(十)菜单插件superfish

    网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...

  8. 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

    (前端用重点整理博客地址)链接地址:http://www.cnblogs.com/atree/archive/2011/06/30/jQuery-smartMenu-javascript.html 一 ...

  9. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

随机推荐

  1. 03 自学Aruba之2.4GHz及5GHz无线信道

    点击返回:自学Aruba之路点击返回:自学Aruba集锦 03 自学Aruba之2.4GHz及5GHz无线信道 1.  2.4GHz信道 在各国家授权使用的频段: 信道号 中心频率(GHz) 美国FC ...

  2. 洛谷 P3297 [SDOI2013]逃考 解题报告

    P3297 [SDOI2013]逃考 题意 给一个平面矩形,里面有一些有标号点,有一个是人物点,人物点会被最近的其他点控制,人物点要走出矩形,求人物点最少被几个点控制过. 保证一开始只被一个点控制,没 ...

  3. 前端学习 -- Html&Css -- 表单

    表单的作用就是用来将用户信息提交给服务器的,比如:百度的搜索框 注册 登录这些操作都需要填写表单. 使用form标签创建一个表单,form标签中必须指定一个action属性,该属性指向的是一个服务器的 ...

  4. 常用linux命令（项目部署）

    centos 图形 命令行 界面切换 如果在图形界面下,按:Ctrl+Alt+F2进入如下命令行界面 -------------- 看当前目录的路径: pwd ................... ...

  5. 常量引用 const T&

    1.引用本身不是对象,只是引用对象的别名,没有内存空间产生 2.引用必须严格类型匹配 3.而常量引用 const T& 可以引用字面值常量及表达式 其实也就是右值,且常量引用的不同与T类型对象 ...

  6. springboot集成mybatis-generator时候遇到的问题

    今天在集成mybatis自动生成内容的时候,出现了几个问题,解决了一个小时才搞完,都怪之前没有好好研究研究: 1.mysql-connector-java新驱动带来的问题? 当用比较新的sql驱动的时 ...

  7. byteify

    byteify函数 Python自带的Json库会把json文件load成Unicode对象. 如果想要变成str对象的话,就要自己去encode. def byteify(input): if is ...

  8. SQL经典问题：找出连续日期及连续的天数

    create table tmptable(rq datetime) go insert tmptable values('2010.1.1') insert tmptable values('201 ...

  9. Python Machine Learning-Chapter3

    Chapter 3:A Tour of Machine Learning Classifiers Using Scikit-learn 3.1:Training a perceptron via sc ...

  10. Port Forwarding in Windows

    转自:http://woshub.com/port-forwarding-in-windows/ Since Windows XP there is a built-in ability in Mic ...