Press "Enter" to skip to content

Responsive Vertical Navigation Menu | jQuery rvnm

rvnm is responsive vertical menu navigation just like the WordPress menu, with search and themes. rvnm is a jQuery plugin that helps developers create responsive and easy-to-use sidebar navigation as you can see in the WordPress admin panel.

jquery navigation bar, jquery menu bar with submenu, navbar plugin wordpress, jquery menu responsive, jquery sidebar menu with submenu

Features:

  • Supports unlimited list levels.
  • Collapse / Expand submenus just like an accordion.
  • Two display modes: desktop and mobile.
  • 5 built-in themes.
  • It allows the user to search the navigation items via the search field.
  • Licensed under GPL-3.0.

How to make use of it:

1. Load the Font Awesome for the menu items.

<link rel="stylesheet" href="/path/to/font-awesome.min.css" />

2. Load the wanted jQuery library from a CDN.

<script src="/path/to/cdn/jquery.min.js"></script>

3. Download and load the jQuery rvnm plugin’s JavaScript and Stylesheet within the doc.

<link rel="stylesheet" href="src/jquery-rvnm.css" />
<script src="src/jquery-rvnm.js"></script>

4. Create the sidebar navigation from a nested nav listing as follows:

<nav id="navbar" class="">
  <ul>
    <li> <span class="spliter"> <i class="fa fa-cart-plus"></i> Aliquam dictum </span> </li>
    <li> <a href="#"> <i class="fa fa-bell-o"></i> eleifend risus </a>
      <ul>
        <li> <a href="#"> suscipit mauris </a> </li>
        <li> <a href="#"> sed placerat ipsum </a> </li>
        <li> <a href="#"> Proin turpis </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-plus-square"></i> Nunc eleifend molestie velit. Morbi lobortis quam eu velit </a>
      <ul>
        <li> <a href="#"> semper leo </a> </li>
        <li> <a> habitasse platea </a>
          <ul>
            <li> <a href="#"> dictumst </a> </li>
            <li> <a href="#"> Vivamus facilisis </a> </li>
            <li> <a href="#"> In hac habitasse </a>
              <ul>
                <li><a href="#"> platea dictumst </a></li>
                <li><a href="#">Nunc sed lacus</a></li>
                <li><a href="#">euismod gravida </a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="#"> sed placerat ipsum </a> </li>
      </ul>
    </li>
    <li class=""> <a href="#"> <i class="fa fa-bullhorn"></i> bibendum dapibus </a> </li>
    <li> <a href="#"> <i class="fa fa-building"></i> Proin nonummy </a> </li>
    <li> <span class="spliter"> <i class="fa fa-bars"></i> Nullam non diam </span> </li>
    <li> <a href="#"> <i class="fa fa-align-center"></i> platea dictumst </a>
      <ul>
        <li> <a href="#"> lacus at augue </a> </li>
        <li> <a href="#"> pede felis </a> </li>
        <li> <a href="#"> dignissim leo </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-amazon"></i> second </a> </li>
    <li> <a href="#"> <i class="fa fa-apple"></i> third </a> </li>
    <li> <span class="spliter"> <i class="fa fa-desktop"></i> splliter teest </span> </li>
    <li> <a href="#"> <i class="fa fa-expand"></i> quis lectus </a>
      <ul>
        <li> <a href="#"> Nunc sed lacus </a> </li>
        <li> <a href="#"> Pellentesque </a> </li>
        <li> <a href="#"> malesuada nulla </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-address-book"></i> ipsum urna sed risus </a> </li>
    <li> <span class="spliter"> <i class="fa fa-cut"></i> Maecenas fermentum </span> </li>
    <li> <a href="#"> <i class="fa fa-yoast"></i> sunt in culpa </a>
      <ul>
        <li> <a href="#"> officia deserunt </a> </li>
        <li> <a href="#"> mollit anim id </a> </li>
        <li> <a href="#"> id est laborum </a> </li>
      </ul>
    </li>
    <li> <a href="#"> <i class="fa fa-bank"></i> Aenean magna nisl </a> </li>
  </ul>
</nav>

5. Wrap your content right into a container named wrapper.

<div id="wrapper">
  Main Content Here
</div>

6. Initialize the jQuery rvnm plugin on the nav.

var rvnm = $("#navbar").rvnm();

7. Set the preliminary display mode.

var rvnMenu = $("#navbar").rvnm({
    mode: 'minimal'
});

8. Set the theme you need to make use of. All accessible themes:

var rvnMenu = $("#navbar").rvnm({
    theme: 'dark-lesb'
});

9. Enable & disable the search field.

var rvnMenu = $("#navbar").rvnm({
    searchable: true
});

WordPress Style Vertical Sidebar Navigation Plugin, rvnm Github, jquery menu examples


See Demo And Download

Official Website(4xmen): Click Here

This superior jQuery/javascript plugin is developed by 4xmen. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.