3-7 菜单工具插件——menu
本节编程练习不计算学习进度，请电脑登录imooc.com操作

菜单工具插件——menu

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

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

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

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

在浏览器中显示的效果：

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

任务

我来试试，亲自调用菜单插件构建一个四层结构的菜单

在下列代码的第43行，调用菜单插件的meun()方法，定义一个四层结构的导航式菜单。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>菜单工具插件</title>
  5.         <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  8.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <ul id="menu">
  13.             <li><a href="#">小明一中</a>
  14.                 <ul>
  15.                     <li><a href="#">高中部</a>
  16.                         <ul>
  17.                             <li><a href="#">高一(1)班</a></li>
  18.                             <li><a href="#">高一(2)班</a></li>
  19.                             <li><a href="#">高一(3)班</a>
  20.                                 <ul>
  21.                                     <li><a href="#">小胡</a></li>
  22.                                     <li><a href="#">小李</a></li>
  23.                                     <li><a href="#">小陈</a></li>
  24.                                 </ul>
  25.                             </li>
  26.                         </ul>
  27.                     </li>
  28.                     <li><a href="#">初中部</a>
  29.                         <ul>
  30.                             <li><a href="#">初一(1)班</a></li>
  31.                             <li><a href="#">初一(2)班</a></li>
  32.                             <li><a href="#">初一(3)班</a></li>
  33.                         </ul>
  34.                     </li>
  35.                     <li><a href="#">教研部</a></li>
  36.                 </ul>
  37.             </li>
  38.             <li class="ui-state-disabled"><a href="#">大明二中</a></li>
  39.         </ul>
  40.  
  41.         <script type="text/javascript">
  42.             $(function () {
  43.                 ?
  44.             });
  45.         </script>
  46.     </body>
  47. </html>
  1. body
  2. {
  3.     font-size: 62.5%;
  4. }
  5. .ui-menu
  6. {
  7.     width: 150px;
  8. }
下一节