rvnm's Introduction

What is rvnm

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

How use it?

With package manager:

npm i rvnm

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 container 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

`sticky`

Sticky ratio default is 1.85

screenshot

Browser compatibility

IE >= 9
Edge all version
Firefox >= 16
Safari >=11
/ chrome / chromium >= 26
Opera >=15
Android browser >= 4.4
Blackberry Browser >= 10
iOS Safari >= 7

rvnm's People

Contributors

Stargazers

Watchers

rvnm's Issues

Can't set minimal mode with icons in desktop

I've tried to put the menu in minimal mode by default, but when i set mode 'minimal' in the js file, menu is mobile with no icons only the burger one.

How to set minimal menú showing all icons (no labels) with submenu on icon-hover ?

thanks so much.

Recommend Projects