https://github.com/4xmen/rvnm

Responsive vertical navigation menu
https://github.com/4xmen/rvnm

4xmen javascript menu multi-theme navbar responsive-menu responsive-navbar right-to-left rtl rtl-design wordpress wordpress-menu wordpress-navigation xstack

Last synced: 24 days ago
JSON representation

Responsive vertical navigation menu

• Host: GitHub
• URL: https://github.com/4xmen/rvnm
• Owner: 4xmen
• License: gpl-3.0
• Created: 2017-12-07T22:20:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T03:08:33.000Z (over 2 years ago)
• Last Synced: 2025-04-19T04:40:54.487Z (30 days ago)
• Topics: 4xmen, javascript, menu, multi-theme, navbar, responsive-menu, responsive-navbar, right-to-left, rtl, rtl-design, wordpress, wordpress-menu, wordpress-navigation, xstack
• Language: CSS
• Size: 11.6 MB
• Stars: 65
• Watchers: 6
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# What is rvnm

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

![A Screenshot ]( /rvnm.gif?raw=true "Screen shot")

# How use it?

With package manager:

````

npm i rvnm

````

or 

````

yarn add rvnm

````

or use dist file of repo.

HTML:

```html

 

    


        


            

                

                Aliquam dictum

            

        

        


              

                

                Nunc eleifend molestie velit. Morbi lobortis quam eu velit

            

            


                


                    

                        semper leo

                    

                

                


                    

                        habitasse platea

                    

                    


                        


                            

                               dictumst

                            

                        

                        


                            

                                Vivamus facilisis

                            

                        

                        


                            

                                In hac habitasse

                            

                            


                                
 platea dictumst 

                                
Nunc sed lacus

                                
euismod gravida 


                            


                        


                    


                

                


                    

                        sed placerat ipsum

                    

                


            


        

        


              

                

                ipsum urna sed risus

            

        

        


            

                

                Maecenas fermentum

            

        

    


```

jquery use:

```javascript

$(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

 

![A Screenshot ]( /screenshot.png?raw=true "Screen shot")

## Browser compatibility

- ![ie](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/internet-explorer_9-11/internet-explorer_9-11_16x16.png) IE >= 9

- ![edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/edge/edge_16x16.png) Edge all version

- ![firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/firefox/firefox_16x16.png) Firefox >= 16

- ![safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/safari_1-7/safari_1-7_16x16.png) Safari >=11

- ![chrom](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chrome/chrome_16x16.png)/![chromium](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/chromium/chromium_16x16.png) chrome / chromium >= 26 

- ![opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/opera/opera_16x16.png) Opera >=15

- ![android](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/android/android_16x16.png) Android browser >= 4.4

- Blackberry Browser >=  10

- ![ios safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/46.1.0/archive/safari-ios_1-6/safari-ios_1-6_16x16.png) iOS Safari >= 7