Skip to content
Responsive vertical navigation menu
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
demo
dist
nbproject
src
.gitignore
Gruntfile.js
LICENSE Initial commit Dec 7, 2017
README.md add browser compaliblity Jul 27, 2019
package.json a few changes & add tags Jul 6, 2019
rvnm.gif update gif demo Jun 30, 2019
screenshot.png

README.md

What is rvnm

Responsive vertical navigation menu same as wordpress menu, with search and themes.

A Screenshot

How use it?

With package manager:

npm i rvnm

or

yarn add rvnm

or use dist file of repo.

HTML:

 <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-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>
            <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>
    </ul>
</nav>

jquery use:

$(function () {
    var rvnMenu = $("#navbar").rvnm({
        searchable: true,
        theme: 'dark-lesb'
    });
    rvnMenu.setTheme('dark-doder');
});

DEMO (example)

You can watch /demo of project.

Online demo:

http://4xmen.ir/github_example/rvnm/demo/

online rtl demo:

http://4xmen.ir/github_example/rvnm/demo/index-rtl.html

option and events

wrapper

is main body of site default is #wrapper

mode

mode of menu can be (default = desktop| minimal = tablet | mobile)

theme

theme of the menu default is "" and this a light theme other themes:

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

searchable

you can use searchable menu but default is false

screenshot

A Screenshot

Browser compatibility

  • ie IE >= 9
  • edge Edge all version
  • firefox Firefox >= 16
  • safari Safari >=11
  • chrom/chromium chrome / chromium >= 26
  • opera Opera >=15
  • android Android browser >= 4.4
  • Blackberry Browser >= 10
  • ios safari iOS Safari >= 7
You can’t perform that action at this time.