原理很简单.

涉及到知识点：

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>

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. MT【19】舒尔不等式设计理念及证明

    评:舒尔的想法是美妙的,当然他本身也有很多意义,在机械化证明的理念里,它也占据了一方田地.

  2. 洛谷P1776 宝物筛选_NOI导刊2010提高（02）（多重背包，单调队列）

    为了学习单调队列优化DP奔向了此题... 基础的多重背包就不展开了.设\(f_{i,j}\)为选前\(i\)个物品,重量不超过\(j\)的最大价值,\(w\)为重量,\(v\)为价值(蒟蒻有强迫症,特 ...

  3. Spring Cloud(四) --- config

    Spring Cloud Config 随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的 ...

  4. 【洛谷P1717】钓鱼

    题目大意:给定 N 个位置,每个位置有一个答案贡献值,在一个位置加了一次该位置的答案贡献值之后,该值会减掉一部分,从一个位置移动到另一个位置需要花费一定的时间,问:给定 M 单位的时间,如何移动使得答 ...

  5. EasyUI 树形菜单加载父/子节点

    通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree)是不允许的. 但是我们可以在加载树形菜单之前,把它转换为标准标准 ...

  6. 再谈一次关于Java中的 AIO(异步IO) 与 NIO(非阻塞IO)

    今天用ab进行压力测试时,无意发现的: Requests per second:    xxx [#/sec] (mean) ab -n 5000 -c 1000 http://www:8080/up ...

  7. MUI 样式按钮的禁用

    1)如果是button,input等标签,可以     .attr("disabled",true)或者.attr("disabled","disab ...

  8. python---windows下安装和使用memcache

    windows版本下memcache地址http://www.runoob.com/memcached/window-install-memcached.html 注意当选择版本>=1.45时需 ...

  9. scala基本语法和单词统计

    scala 基本语法 1.声明变量 (1)val i = 1 使用val声明的变量值是不可变的,相当于java里final修饰的变量,推荐使用. (2)var i = "hello" ...

  10. vuex2.0源码分析

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...