表单/表格

响应式垂直侧边栏jQuery插件

面包多

响应式垂直侧边栏jQuery插件-创客云
rvnm 是一款 jQuery 响应式垂直侧边栏插件。该插件可以非常方便的生成响应式的侧边栏,并内置了多种颜色主题,以及搜索框。

HTML 结构

  1. <nav id="navbar" class="">
  2.     <ul>
  3.         <li>
  4.             <span class="spliter">
  5.                 <i class="fa fa-cart-plus"></i>
  6.                 Aliquam dictum
  7.             </span>
  8.         </li>
  9.         <li>
  10.             <a href="#">  
  11.                 <i class="fa fa-plus-square"></i>
  12.                 Nunc eleifend molestie velit. Morbi lobortis quam eu velit
  13.             </a>
  14.             <ul>
  15.                 <li>
  16.                     <a href="#">
  17.                         semper leo
  18.                     </a>
  19.                 </li>
  20.                 <li>
  21.                     <a>
  22.                         habitasse platea
  23.                     </a>
  24.                     <ul>
  25.                         <li>
  26.                             <a href="#">
  27.                                dictumst
  28.                             </a>
  29.                         </li>
  30.                         <li>
  31.                             <a href="#">
  32.                                 Vivamus facilisis
  33.                             </a>
  34.                         </li>
  35.                         <li>
  36.                             <a href="#">
  37.                                 In hac habitasse
  38.                             </a>
  39.                             <ul>
  40.                                 <li><a href="#"> platea dictumst </a></li>
  41.                                 <li><a href="#">Nunc sed lacus</a></li>
  42.                                 <li><a href="#">euismod gravida </a></li>
  43.  
  44.                             </ul>
  45.  
  46.                         </li>
  47.  
  48.                     </ul>
  49.  
  50.                 </li>
  51.                 <li>
  52.                     <a href="#">
  53.                         sed placerat ipsum
  54.                     </a>
  55.                 </li>
  56.  
  57.             </ul>
  58.  
  59.         </li>
  60.         <li>
  61.             <a href="#">  
  62.                 <i class="fa fa-address-book"></i>
  63.                 ipsum urna sed risus
  64.             </a>
  65.         </li>
  66.         <li>
  67.             <span class="spliter">
  68.                 <i class="fa fa-cut"></i>
  69.                 Maecenas fermentum
  70.             </span>
  71.         </li>
  72.     </ul>
  73. </nav>
也想出现在这里?联系我们
创客主机

初始化插件

  1. $(function () {
  2.     var rvnMenu = $("#navbar").rvnm({
  3.         searchable: true,
  4.         theme: 'dark-lesb'
  5.     });
  6.     rvnMenu.setTheme('dark-doder');
  7. });

主题样式

  • dark
  • dark-lesb dark & pink
  • dark-doder dark & blue
  • dark-beryl dark & green
  • dark-ruby dark & red

Codepen 网址:https://github.com/4xmen/rvnm

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!