【JQuery UI】菜单工具插件——menu

最新推荐文章于 2023-04-10 08:54:32 发布

badlyForPapers

最新推荐文章于 2023-04-10 08:54:32 发布

阅读量2.5k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/happyhaojie/article/details/51088166

版权

jQuery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

该控件用处很大！

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：

$(selector).menu({options});

selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

例子：调用菜单插件的meun()方法，定义一个四层结构的导航式菜单。

<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>

badlyForPapers

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JQuery UI】菜单工具插件——menu

该控件用处很大！菜单工具插件可以通过创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下：$(selector).menu({options});selector参数为菜单列表中最外层元素，options为menu()方法的配置对象。例子：调用菜单插件的meun()方法，定义一个四层结构的导航式菜单。
复制链接

扫一扫