<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>菜单工具插件</title>

        <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />

        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>

        <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

        <style>

    .ui-menu

{

    width: 150px;

}

        </style>

    </head>

    <body>

        <ul id="menu">

            <li><a href="#">小明一中</a>

                <ul>

                    <li><a href="#">高中部</a>

                        <ul>

                            <li><a href="#">高一(1)班</a></li>

                            <li><a href="#">高一(2)班</a></li>

                            <li><a href="#">高一(3)班</a>

                                <ul>

                                    <li><a href="#">小胡</a></li>

                                    <li><a href="#">小李</a></li>

                                    <li><a href="#">小陈</a></li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                    <li><a href="#">初中部</a>

                        <ul>

                            <li><a href="#">初一(1)班</a></li>

                            <li><a href="#">初一(2)班</a></li>

                            <li><a href="#">初一(3)班</a></li>

                        </ul>

                    </li>

                    <li><a href="#">教研部</a></li>

                </ul>

            </li>

            <li class="ui-state-disabled"><a href="#">大明二中</a></li>

        </ul>

        <script type="text/javascript">

            $(function () {

                $("#menu").menu();

            });

        </script>

    </body>

</html>

jQuery插件（多级菜单）的更多相关文章

  1. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

  2. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  3. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  4. 应用于网站导航中的 12 个 jQuery 插件

    当考虑到网页设计时,导航被认为是使网页以用户友好方式展现的一个重要部分.在现代的交互网站中,导航起着至关重要的作用,如果没有正确地处理会影响你网站的访问.适当的导航工具能够帮助用户在网站的不同页面内容 ...

  5. 多级弹出菜单jQuery插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...

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

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

  7. jquery自定义插件-参数化配置多级菜单导航栏插件

    1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...

  8. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  9. 好用的侧边栏菜单/面板jQuery插件

    我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...

  10. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

随机推荐

  1. MQTT 消息 发布 订阅

    当连接向一个mqtt服务器时,clientId必须是唯一的.设置一样,导致client.setCallback总是走到 connectionLost回调.报connection reset.调查一天才 ...

  2. JS中的decodeURIComponent和encodeURIComponent

    两个函数可以对特定函数生成的密码字符串进行解密操作,就可以生成为未解密的字符串 使用方法: //加密 encodeURIComponent("http://www.cnblogs.com/7 ...

  3. c# 程序设计教程笔记

    值类型:[简单类型[整数类型(sbyte,byte,short,ushort,int uint,long....),字符类型),布尔类型,实数类型],结构类型, 枚举类型]. 引用类型:[类,委托,数 ...

  4. Java排序算法——拓扑排序

    package graph; import java.util.LinkedList; import java.util.Queue; import thinkinjava.net.mindview. ...

  5. python 模块基础介绍

    从逻辑上组织代码,将一些有联系,完成特定功能相关的代码组织在一起,这些自我包含并且有组织的代码片段就是模块,将其他模块中属性附加到你的模块的操作叫做导入. 那些一个或多个.py文件组成的代码集合就称为 ...

  6. 数据库大数据处理---复制（SQLServer)

    复制? 复制起初并不是用于作为高可用性功能而设计的,实际上复制的概念就像其名称一样,用于复制数据.比如将某个库中的数据“复制”到另一个库,到另一个实例中,由OLTP复制到OLAP环境中,由某数据中心复 ...

  7. esnext：最后一个参数后面也允许加逗号了

    https://jeffmo.github.io/es-trailing-function-commas 目前是一个 stage 3 的提案,Chakra 和 JSC 已经实现了,它允许我们在函数定义 ...

  8. 创建你的第一个JavaScript库

    是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...

  9. DataTable数据检索的性能分析（转寒江独钓)

    我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...

  10. PHP中global与$GLOBALS['']的区别

    +++ 探讨(一)+++++++++++++++++++++++++++++++++++++++ 很多人都认为global和$GLOBALS[]只是写法上面的差别,其实不然. 根据官方的解释是 $GL ...