首页>>导航菜单>>侧边栏菜单插件，移动端与pc端均可使用(2017-06-29)

侧边栏菜单插件，移动端与pc端均可使用

侧边栏菜单插件，移动端与pc端均可使用
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle">  
  2.         <div class="sidenav-brand">  
  3.           Freejs  
  4.         </div>  
  5.   
  6.         <div class="sidenav-header">  
  7.           Section Header  
  8.           <small>secondary text</small>  
  9.         </div>  
  10.   
  11.         <ul class="sidenav-menu">  
  12.           <li>  
  13.             <a href="javascript:;" data-sidenav-dropdown-toggle class="active">  
  14.               <span class="sidenav-link-icon">  
  15.                 <i class="material-icons">store</i>  
  16.               </span>  
  17.               <span class="sidenav-link-title">Lorem ipsum</span>  
  18.               <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>  
  19.                 <i class="material-icons">arrow_drop_down</i>  
  20.               </span>  
  21.               <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>  
  22.                 <i class="material-icons">arrow_drop_up</i>  
  23.               </span>  
  24.             </a>  
  25.   
  26.             <ul class="sidenav-dropdown" data-sidenav-dropdown>  
  27.               <li><a href="javascript:;">Dolor sit amet</a></li>  
  28.               <li><a href="javascript:;">Consectetur adipisicing</a></li>  
  29.               <li><a href="javascript:;">Elit</a></li>  
  30.             </ul>  
  31.           </li>  
  32.           <li>  
  33.             <a href="javascript:;" data-sidenav-dropdown-toggle>  
  34.               <span class="sidenav-link-icon">  
  35.                 <i class="material-icons">payment</i>  
  36.               </span>  
  37.               <span class="sidenav-link-title">Sed do eiusmod</span>  
  38.               <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>  
  39.                 <i class="material-icons">arrow_drop_down</i>  
  40.               </span>  
  41.               <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>  
  42.                 <i class="material-icons">arrow_drop_up</i>  
  43.               </span>  
  44.             </a>  
  45.   
  46.             <ul class="sidenav-dropdown" data-sidenav-dropdown>  
  47.               <li><a href="javascript:;">Tempor incididunt</a></li>  
  48.               <li><a href="javascript:;">Labore</a></li>  
  49.             </ul>  
  50.           </li>  
  51.           <li>  
  52.             <a href="javascript:;" data-sidenav-dropdown-toggle>  
  53.               <span class="sidenav-link-icon">  
  54.                 <i class="material-icons">shopping_cart</i>  
  55.               </span>  
  56.               <span class="sidenav-link-title">Dolore magna</span>  
  57.               <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>  
  58.                 <i class="material-icons">arrow_drop_down</i>  
  59.               </span>  
  60.               <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>  
  61.                 <i class="material-icons">arrow_drop_up</i>  
  62.               </span>  
  63.             </a>  
  64.   
  65.             <ul class="sidenav-dropdown" data-sidenav-dropdown>  
  66.               <li><a href="javascript:;">Aliqua</a></li>  
  67.               <li><a href="javascript:;">Exercitation</a></li>  
  68.               <li><a href="javascript:;">Minim veniam</a></li>  
  69.             </ul>  
  70.           </li>  
  71.           <li>  
  72.             <a href="javascript:;">  
  73.               <span class="sidenav-link-icon">  
  74.                 <i class="material-icons">assignment_ind</i>  
  75.               </span>  
  76.               <span class="sidenav-link-title">Nostrud ullamco</span>  
  77.             </a>  
  78.           </li>  
  79.           <li>  
  80.             <a href="javascript:;">  
  81.               <span class="sidenav-link-icon">  
  82.                 <i class="material-icons">alarm</i>  
  83.               </span>  
  84.               <span class="sidenav-link-title">Commodo</span>  
  85.             </a>  
  86.           </li>  
  87.   
  88.         </ul>  
  89.   
  90.         <div class="sidenav-header">  
  91.           Another Section Header  
  92.         </div>  
  93.   
  94.         <ul class="sidenav-menu">  
  95.           <li>  
  96.             <a href="javascript:;" data-sidenav-dropdown-toggle>  
  97.               <span class="sidenav-link-icon">  
  98.                 <i class="material-icons">date_range</i>  
  99.               </span>  
  100.               <span class="sidenav-link-title">Reprehenderit</span>  
  101.               <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon>  
  102.                 <i class="material-icons">arrow_drop_down</i>  
  103.               </span>  
  104.               <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon>  
  105.                 <i class="material-icons">arrow_drop_up</i>  
  106.               </span>  
  107.             </a>  
  108.   
  109.             <ul class="sidenav-dropdown" data-sidenav-dropdown>  
  110.               <li><a href="javascript:;">Voluptate</a></li>  
  111.               <li><a href="javascript:;">Excepteur</a></li>  
  112.             </ul>  
  113.           </li>  
  114.           <li>  
  115.             <a href="javascript:;">  
  116.               <span class="sidenav-link-icon">  
  117.                 <i class="material-icons">backup</i>  
  118.               </span>  
  119.               <span class="sidenav-link-title">Occaecat</span>  
  120.             </a>  
  121.           </li>  
  122.           <li>  
  123.             <a href="javascript:;">  
  124.               <span class="sidenav-link-icon">  
  125.                 <i class="material-icons">settings</i>  
  126.               </span>  
  127.               <span class="sidenav-link-title">Deserunt</span>  
  128.             </a>  
  129.           </li>  
  130.         </ul>  
  131.       </nav>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_621.html