<!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. 分享:录制gif小图片工具

    今天博主分享一个录制gif小图片的工具[LICEcap]: 有的时候,图片解释起来不够直观,如果是一段小动画,别人一看就懂了. 工具我放在百度网盘上面,当然也可以自己在网上下载. 下载地址:http: ...

  2. 用File判断D盘下面是否还有txt文件

    package cn.idcast; import java.io.File; public class File1 { public static void main(String[] args) ...

  3. Arcgis 10.1安装

    来源http://download.csdn.net/detail/l_j_kin/7310665#comment 测试有效,存着备用,转过来不自己写了 安装desktop 打开“注册机”,功能选择a ...

  4. centos7删除自带openjdk

    一些开发版的centos会自带jdk,我们一般用自己的jdk,把自带的删除.先看看有没有安装java -version [root@java-test-01 ~]# java -version ope ...

  5. 【Alpha版本】项目总结

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬涛 031402341 王 ...

  6. 巧用dimens适配多个分辨率

      让应用自动适配多个分辨率的屏幕,是每个android程序员的基本功,就好像前端工程师熟练编写CSS Hack一样.适配工作中一个重要的工作就是对页面的调整. 对于页面的适配,有很多的方法和技巧.比 ...

  7. JS中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. php自动加载

    初學PHP時,最早會面對的問題之一就是require與include差別何在?require_once與include_once又是什麼?弄懂這些問題之後,如果不使用framework,直接開發,便常 ...

  9. AdminLTE 2 开源模版

    AdminLTE  2 开源模版: 1. 文档  https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html 2. 代码   ...

  10. iOS 获取沙盒路径方法

    //获取家目录路径的函数: NSString *homeDir = NSHomeDirectory(); //获取Documents目录路径的方法: NSArray *paths = NSSearch ...