首页>>导航菜单>>jside 响应式侧边栏导航，可以在右侧或者左侧(2019-01-13)

jside 响应式侧边栏导航，可以在右侧或者左侧

jside 响应式侧边栏导航，可以在右侧或者左侧
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <menu class="menubar">  
  2.    <menuitem>  
  3.    <button class="menu-trigger"> </button>  
  4.    </menuitem>  
  5.   
  6.     <menuitem class="logo" title="Your Logo Goes Here">  
  7.            <a href="#1"><img src="http://www.freejs.net/images/logo.png" alt="jSide Menu" /> </a>  
  8.      </menuitem>  
  9. </menu>  

 

XML/HTML Code
  1. <div class="menu-head">  
  2.    <span class="layer">  
  3. <div class="col">  
  4.   <div class="row for-pic">  
  5.    <div class="profile-pic">       
  6.    <img src="http://www.freejs.net/images/logo.png" alt="freejs.net" />   
  7.          </div>  
  8.   </div>  
  9.          <div class="row for-name">  
  10.    <h3 title="User Name">Freejs.net </h3>  
  11.         <span class="tagline"> Tagline text goes here</span>  
  12.           </div>  
  13.          </div> <!--//col-->  
  14.   </span>  
  15. </div> <!--//menu-head-->  
  16.   
  17. <nav class="menu-container">  
  18.   
  19. <ul class="menu-items">  
  20. <li><span class="item-icon"><i class="zmdi zmdi-android"></i></span> <a href="#1">  
  21.  Main item one </a></li>   
  22.   
  23. <li> <span class="item-icon"> <i class="zmdi zmdi-apple"></i> </span> <a href="#1">  
  24.  Main item two </a></li>  
  25.    
  26. <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span>  
  27. <span class="dropdown-heading">  
  28.  Item three with dropdown </span>   
  29.      <ul>   
  30.       <li> <a href="#2">dropdown sub item 1 </a> </li>  
  31.      <li> <a href="#2"> dropdown sub item 2 </a> </li>  
  32.       <li> <a href="#2"> dropdown sub item 3 </a> </li>  
  33.      <li> <a href="#2"> dropdown sub item 4 </a> </li>  
  34.       <li> <a href="#2"> dropdown sub item 5 </a> </li>  
  35. <li> <a href="#2"> dropdown sub item 6 </a> </li>  
  36. <li> <a href="#2"> dropdown sub item 7 </a> </li>  
  37.      </ul>   
  38.  </li>  
  39. <li class="has-sub"> <span class="item-icon"> <i class="zmdi zmdi-devices"></i> </span>  
  40.  <span class="dropdown-heading">  
  41.   
  42.  Item four with dropdown </span>   
  43.      <ul>   
  44.       <li> <a href="#2">sub item 1 </a> </li>  
  45.       <li> <a href="#2">sub item 2 </a> </li>  
  46.       <li> <a href="#2">sub item 3 </a> </li>  
  47.      <li> <a href="#2">sub item 4 </a> </li>  
  48.      </ul>   
  49.  </li>  
  50.   
  51. <li> <span class="item-icon"> <i class="zmdi zmdi-keyboard"></i> </span> <a href="#1">  
  52.  Main item four </a></li>   
  53.   
  54. <li> <span class="item-icon"> <i class="zmdi zmdi-dock"></i> </span> <a href="#1">  
  55.  Main item five </a></li>   
  56.   
  57. <li> <span class="item-icon"> <i class="zmdi zmdi-mouse"></i> </span> <a href="#1">  
  58.  Main item five </a></li>   
  59.   
  60. <li> <span class="item-icon"> <i class="zmdi zmdi-tv"></i> </span> <a href="#1">  
  61.  Main item six </a></li>   
  62.   
  63. </ul>  
  64.   
  65.   
  66. </nav>  
  67. <div class="dim-overlay"></div>  

 


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