下拉菜单

  • 将动作或菜单折叠到下拉菜单中。
  • .vus-dropdown:外层样式。
  • .dropdown:菜单样式。
  • .optgroup:菜单组。
  • .head:菜单标题。
  • .item:菜单项目。
  • .divide:分界线。
  • .active:当前选中。
  • .scrollbar:设置滚动条。
  • .disabled:禁用。

基础用法

<div class="vus-dropdown">
   <div class="dropdown scrollbar">
      <ul class="optgroup" v--text="四书">
         <li class="item active">《论语》</li>
         ...
         <li class="item disabled">《中庸》</li>
      </ul>
      <ul class="optgroup" v--text="五经">
         <li class="item">《尚书》</li>
         ...
         <li class="item disabled">《春秋左氏传》</li>
         ...
      </ul>
      <ul class="optgroup" v--text="四大名著">
         <li class="item">《三国演义》</li>
         <li class="item disabled">《水浒传》</li>
         ...
      </ul>
   </div>
</div>

包含子菜单

添加.submenu类,设置多级菜单。可选.arrow类作为下级菜单箭头。(注:多级菜单不支持滚动条)

<div class="vus-dropdown submenu">
   <ul class="dropdown">
      <li class="head">四书</li>
      <li class="item arrow">
         <a href="#" class="link">《论语》</a>
         <div class="vus-dropdown">
            <ul class="dropdown">
               <li class="item"><a href="#" class="link">学而篇</a></li>
               <li class="item"><a href="#" class="link">为政篇</a></li>
               <li class="item"><a href="#" class="link">八佾篇</a></li>
               <li class="item disabled"><a href="#" class="link">里仁篇</a></li>
               <li class="item disabled"><a href="#" class="link">公冶长篇</a></li>
               <li class="item"><a href="#" class="link">雍也篇</a></li>
               <li class="item">...</li>
            </ul>
         </div>
      </li>
      <li class="item arrow">
         <a href="#" class="link">《孟子》</a>
         <div class="vus-dropdown">
            <ul class="dropdown">
               <li class="item arrow">
                  <a href="#" class="link">梁惠王章句</a>
                  <div class="vus-dropdown">
                     <ul class="dropdown">
                        <li class="item arrow">
                           <a href="#" class="link">梁惠王章句上</a>
                           <div class="vus-dropdown">
                              <ul class="dropdown">         
                                 <li class="item">         
                                    <a href="#" class="link">第一节</a>
                                 </li>
                                 <li class="item">         
                                    <a href="#" class="link">第二节</a>
                                 </li>
                                 <li class="item">         
                                    <a href="#" class="link">...</a>
                                 </li>
                              </ul>
                           </div>
                        </li>
                     </ul>
                  </div>
               </li>
            </ul>
         </div>
      </li>
   </ul>
</div>