菜单工具插件

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

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

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

在页面中,通过<ul>元素内联的方式构建一个三层结构的导航菜单,并将最外层<ul>元素通过menu()方法绑定插件,实现导航菜单的功能

<body>

<ul id=:menu">

<li><a href="#">我最喜欢的食物</a>

<ul>

<li><a href="#">蔬菜</a>

<ul>

<li><a href="#">芹菜</a></li>

<li><a href="#">胡萝卜</a></li>

<li><a href="#>茄子</a></li>

</ul>

</li>

<li><a href="#">水果</a>

<ul>

<li><a href="#">香蕉</a></li>

<li><a href="#">葡萄</a></li>

</ul>

</li>

<li<a href="#">饮料</a></li>

</ul>

</li>

<li class="ui-state-disabled"><a href="#">我最喜欢的运动</a></li>

</ul>

<script type="javascript">

$(fuction(){

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

});

</script>

</body>


通过<ul>内嵌的方式,构建一个三层结构的导航菜单,将<li>元素的class属性值设为ui-state-disabled”,可将菜单选项置为不可用状态。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 jQuery实现Ajax应用 1-1 使用load()方法异步请求数据 使用load()方法通过Ajax请...
    mo默22阅读 1,731评论 1 9
  • 拖曳插件—— draggable 拖曳插件 draggable 的功能是拖动被绑定的元素,当这个 jQuery U...
    孤佣阅读 593评论 0 1
  • 《能量祈祷誓言》 “门儿哥、博杰,数据还是有点低,你们还是先出去下,这个你们也不用听”啾啾好似调取了数据后,对我们...
    天空之城正阳门阅读 355评论 0 2
  • 下午两点左右旅行团的客人都走了,餐厅众人也到了午饭时间。 大厨简单地炒两个青菜,再准备一盆馒头。在后厨放上张桌子,...
    黄陈阅读 91评论 0 0
  • 我 浑浑噩噩的我,忙忙碌碌。 我,不知为何,心中所想。 总是想改变,却跳不自己的圈子。 我,满是热度,剩的只是悔恨...
    孤独终老一舍阅读 254评论 0 0