Responsive Menu
a jQuery plugin

About Responsive Menu

jQuery Responsive Menu is a drop-down menu for responsive websites. It is a jQuery plugin that includes a JavaScript file and CSS file as well as sample HTML.


Visit to view a responsive demo

Basic Setup

  • Download - Download and extract the Responsive Menu zip files -
  • Copy files - Copy the responsive-menu.js and responsive-menu.css files to your project
  • Setup Menu HTML - Open the responsive-menu.html sample file and copy and past the menu html into the html files in your project. Or, setup existing menus in your project to work with Responsive Menu (see Configuration).
  • Link to CSS and JavaScript files - Add link and script references to your HTML files
  • Initialize Responsive Menu - Activate the plugin using jQuery (see Configuration)

Using Bower Package Manager

The Responsive Menu repo is registered as a bower package as jquery-responsive-menu.


Suggested HTML

    <div class="rm-container">
        <a class="rm-toggle rm-button rm-nojs" href="#">Menu</a>
        <nav class="rm-nav rm-nojs rm-lighten">
            <ul> ...

Theme class options

Options: rm-lighten, rm-darken.
rm-lighten theme lightens menu item backgrounds and is best used if your design requires a dark menu background color. rm-darken theme darkens menu item backgrounds and is best used if your design required a light menu background color. You can set the menu background color to any color to work with the chosen theme.

Sample jQuery

    jQuery(function ($) {
        var menu = $('.rm-nav').rMenu({

            // Optional Settings
            minWidth: '960px',


Full List of Options


Minimum width for expanded layout in pixels - String
Should match media query in css file. Must be in pixels and include px units if not using Modernizr.
default: '769px'


The opening and closing speed of the menus in milliseconds
default: 400


The jQuery easing function - used with jQuery transitions
default: 'swing'
options: 'swing', 'linear'


The CSS3 transitions easing function - used with CSS3 transitions
default: 'ease'


Use button as Toggle Link - instead of text
default: true


The Toggle Link selector
default: '.rm-toggle'

The menu/sub-menu selector
default: 'ul'

The menu items selector
default: 'li'


Use CSS3 animation/transitions
default: true
Do not use animation/transitions: false


Force GPU Acceleration default: false
Force: true


Use development mode - outputs information to console
default: false

The Toggle Button

An optional menu-btn.png file is included. By default, the same image is included in the CSS as a data URI so the png file is not required unless you would prefer to use the png file instead of the data URI.


jQuery, Modernizr (optional)

How to run tests

No testing framework at this time

Task Managers

Gruntfile.js and package.json files are included if you want to manage tasks using Grunt.
Note: The Grunt file uses configuration information contained in the package.json

Deployment instructions

The git repo is versioned and includes a Bower configuration file so the repo can be easily included in your project as a dependency.

Contribution guidelines

Contributions are much appreciated and welcomed.

Who do I talk to?