Nav导航菜单

  • 为网站提供导航功能的菜单。
  • .vus-header:顶栏样式。
  • .vus-menu:菜单按钮。
  • .vus-nav-mask:菜单遮罩层。
  • .vus-nav-drawer:导航Drawer。
  • .vus-nav:导航菜单。
  • .divide:分界线。
  • .item:项目列表。
  • .link:链接。
  • .arrow:箭头。
  • .icon:图标。
  • .text:文本。
  • .multi:带子栏目。
  • .hold:保留箭头。
  • .vus-nav-dropdown:子栏目容器。

基础用法

Vusui

<header class="vus-header">
   <!--必需使用vus-nav="menu"属性-->
   <div class="vus-menu vi-nav" vus-nav="button"></div>
   <!--必需使用vus-nav="mask"属性,vus-anim样式为动画时间-->
   <div class="vus-nav-mask vus-anim" vus-nav="mask"></div>
   <!--必需使用vus-nav="drawer"属性-->
   <nav class="vus-nav-drawer vus-anim" vus-nav="drawer">
      <!--导航菜单与分界线样式-->
      <ul class="vus-nav divide">
         <!--项目样式-->
         <li class="item">
            <!--分辨率小于1024px时arrow样式才会显示-->
            <a href="#" class="link arrow">
               <span class="text">首页</span>
            </a>
         </li>
         ...
         <!--带子菜单时必需添加multi样式-->
         <li class="item multi">
            <!--添加hold样式,当分辨率大于1024px保留arrow样式,否则隐藏-->
            <a href="#" class="link arrow hold">
               <span class="text">带子栏目</span>
            </a>
            <!--使用vus-nav-dropdown类包裹子栏目,以此类推-->
            <div class="vus-nav-dropdown">
               <ul class="vus-nav">
                  <li class="item multi">
                     <a href="#" class="link arrow hold">
                        <span class="text">二级栏目</span>
                     </a>
                     <div class="vus-nav-dropdown">
                        <ul class="vus-nav">
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            ...
                        </ul>
                    </div>
                  </li>
                  <li class="item multi">
                     <a href="#" class="link arrow">
                        <span class="text">关于</span>
                     </a>
                  </li>
                  ...
               </ul>
            </div>
         </li>
         ...
      </ul>
   </nav>
</header>
<!--JS使用方法-->
<script>
   Vus.menu('a', 'b'); 
   // 最后结果为:[vus-a="button-b"] / [vus-a="mask-b"] / [vus-a="drawer-b"]
   /** 
    * 使用方法:
    * 按钮: <button class="vus-menu" vus-nav="button">打开菜单</button>
    * 遮罩层: <div class="vus-mask" vus-nav="mask"></div>
    * 抽屉层: <div class="vus-nav-drawer" vus-nav="drawer">...</div>
    */
</script>

带图标导航

  • 使用<i class="icon"></i>标签作为图标样式。
  • 添加类.icon-show:当分辨率大于1024px图标不隐藏。
  • 图标样式请参阅Icon图标API文档。

Vusui

<header class="vus-header">
   <!--必需使用vus-nav="menu"属性-->
   <div class="vus-menu vi-nav" vus-nav="button"></div>
   <!--必需使用vus-nav="mask"属性,vus-anim样式为动画时间-->
   <div class="vus-nav-mask vus-anim" vus-nav="mask"></div>
   <!--必需使用vus-nav="drawer"属性-->
   <nav class="vus-nav-drawer vus-anim" vus-nav="drawer">
      <!--导航菜单与分界线样式-->
      <ul class="vus-nav divide">
         <!--项目样式-->
         <li class="item">
            <!--分辨率小于1024px时arrow样式才会显示-->
            <a href="#" class="link arrow">
               <i class="icon vi-home icon-show"></i>
               <span class="text">首页</span>
            </a>
         </li>
         ...
         <!--带子菜单时必需添加multi样式-->
         <li class="item multi">
            <!--添加hold样式,当分辨率大于1024px保留arrow样式,否则隐藏-->
            <a href="#" class="link arrow hold">
               <i class="icon vi-list-mode-grid icon-show"></i>
               <span class="text">带子栏目</span>
            </a>
            <!--使用vus-nav-dropdown类包裹子栏目,以此类推-->
            <div class="vus-nav-dropdown">
               <ul class="vus-nav">
                  <li class="item multi">
                     <a href="#" class="link arrow hold">
                        <span class="text">二级栏目</span>
                     </a>
                     <div class="vus-nav-dropdown">
                        <ul class="vus-nav">
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            ...
                        </ul>
                    </div>
                  </li>
                  <li class="item multi">
                     <a href="#" class="link arrow">
                        <i class="icon vi-user"></i>
                        <span class="text">关于</span>
                     </a>
                  </li>
                  ...
               </ul>
            </div>
         </li>
         ...
      </ul>
   </nav>
</header>

导航颜色

.vus-header类中添加.dark类,可设置为暗黑色主题。

Vusui

<header class="vus-header dark">
   <!--必需使用vus-nav="menu"属性-->
   <div class="vus-menu vi-nav" vus-nav="button"></div>
   <!--必需使用vus-nav="mask"属性,vus-anim样式为动画时间-->
   <div class="vus-nav-mask vus-anim" vus-nav="mask"></div>
   <!--必需使用vus-nav="drawer"属性-->
   <nav class="vus-nav-drawer vus-anim" vus-nav="drawer">
      <!--导航菜单与分界线样式-->
      <ul class="vus-nav divide">
         <!--项目样式-->
         <li class="item">
            <!--分辨率小于1024px时arrow样式才会显示-->
            <a href="#" class="link arrow">
               <i class="icon vi-home icon-show"></i>
               <span class="text">首页</span>
            </a>
         </li>
         ...
         <!--带子菜单时必需添加multi样式-->
         <li class="item multi">
            <!--添加hold样式,当分辨率大于1024px保留arrow样式,否则隐藏-->
            <a href="#" class="link arrow hold">
               <i class="icon vi-list-mode-grid icon-show"></i>
               <span class="text">带子栏目</span>
            </a>
            <!--使用vus-nav-dropdown类包裹子栏目,以此类推-->
            <div class="vus-nav-dropdown">
               <ul class="vus-nav">
                  <li class="item multi">
                     <a href="#" class="link arrow hold">
                        <span class="text">二级栏目</span>
                     </a>
                     <div class="vus-nav-dropdown">
                        <ul class="vus-nav">
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            <li class="item">
                                <a href="#" class="link arrow">
                                    <span class="text">三级栏目</span>
                                </a>
                            </li>
                            ...
                        </ul>
                    </div>
                  </li>
                  ...
               </ul>
            </div>
         </li>
         ...
      </ul>
   </nav>
</header>