基础菜单Menu Basic

菜单 Menu - 图1

  1. <div class="menu-basic">
  2.     <div><a href="#">Home</a></div>
  3.     <div><a href="#">Clothing</a></div>
  4.     <div><a href="#">Electronics</a></div>
  5.     <div><a href="#">Accessories</a></div>
  6. </div>

填充Grow

添加class="grow"使菜单项自动均分剩余空间

菜单 Menu - 图2

  1. <div class="menu-basic grow">
  2.     ...
  3. </div>

激活与禁用Active and Disabled

为<div>元素添加class="active"转换为激活项，添加class="disabled"转换为禁用项

菜单 Menu - 图3

  1. <div class="menu-basic">
  2.     <div><a href="#">Home</a></div>
  3.     <div class="active"><a href="#">Clothing</a></div>
  4.     <div><a href="#">Electronics</a></div>
  5.     <div class="disabled"><a href="#">Accessories</a></div>
  6. </div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

菜单 Menu - 图4

  1. <div class="menu-basic mystyle">
  2.     ...
  3. </div>

下拉菜单Menu Drop

菜单 Menu - 图5

  1. <div class="menu-drop">
  2.     <div><a href="#">Home</a></div>
  3.     <div>
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div>
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

填充Grow

添加class="grow"使菜单项自动均分剩余空间

菜单 Menu - 图6

  1. <div class="menu-drop grow">
  2.     ...
  3. </div>

激活与禁用Active and Disabled

为菜单项添加class="active"转换为激活项，添加class="disabled"转换为禁用项

菜单 Menu - 图7

  1. <div class="menu-drop">
  2.     <div><a href="#">Home</a></div>
  3.     <div class="active">
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li class="active"><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li class="disabled"><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div class="disabled">
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

菜单 Menu - 图8

  1. <div class="menu-drop mystyle">
  2.     ...
  3. </div>

折叠菜单Menu Accordion

菜单 Menu - 图9

  1. <div class="menu-accordion">
  2.     <div><a href="#">Home</a></div>
  3.     <div>
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div>
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

激活与禁用Active and Disabled

为菜单项添加class="active"转换为激活项，添加class="disabled"转换为禁用项

菜单 Menu - 图10

  1. <div class="menu-accordion">
  2.     <div><a href="#">Home</a></div>
  3.     <div class="active">
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li class="active"><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li class="disabled"><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div class="disabled">
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

菜单 Menu - 图11

  1. <div class="menu-accordion mystyle">
  2.     ...
  3. </div>

滑动菜单Menu Fadeinright

菜单 Menu - 图12

  1. <div class="menu-fadeinright">
  2.     <div><a href="#">Home</a></div>
  3.     <div>
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div>
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

激活与禁用Active and Disabled

为菜单项添加class="active"转换为激活项，添加class="disabled"转换为禁用项

菜单 Menu - 图13

  1. <div class="menu-fadeinright">
  2.     <div><a href="#">Home</a></div>
  3.     <div class="active">
  4.         <a>Clothing</a>
  5.         <ul>
  6.             <li class="active"><a href="#">T-Shirts</a></li>
  7.             <li><a href="#">Long Sleeve Shirts</a></li>
  8.             <li class="disabled"><a href="#">Polo Shirts</a></li>
  9.         </ul>
  10.     </div>
  11.     <div>
  12.         <a>Electronics</a>
  13.         <ul>
  14.             <li><a href="#">iPhone 8 Cases</a></li>
  15.             <li><a href="#">iPhone 7 Cases</a></li>
  16.             <li><a href="#">iPhone 6 Cases</a></li>
  17.         </ul>
  18.     </div>
  19.     <div class="disabled">
  20.         <a>Accessories</a>
  21.         <ul>
  22.             <li><a href="#">Watches</a></li>
  23.             <li><a href="#">Hats</a></li>
  24.             <li><a href="#">Cufflinks</a></li>
  25.         </ul>
  26.     </div>
  27. </div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

菜单 Menu - 图14

  1. <div class="menu-fadeinright mystyle">
  2.     ...
  3. </div>