Narcoleptic Pony Machine

    rvnm

    1.4.0 • Public • Published

    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

    Install

    npm i rvnm

    DownloadsWeekly Downloads

    5

    Version

    1.4.0

    License

    GPL-3.0

    Unpacked Size

    139 kB

    Total Files

    31

    Last publish

    Collaborators

    • a1gard
    • sadeghpm