jQuery Responsive List is a drop-down list of responsive websites. It’s a jQuery plugin that includes a JavaScript file, a CSS file, as well as an HTML form.
responsive drop-down menu examples, responsive drop down menu with submenu, responsive dropdown menu with submenu in sidebar
How to make use of it:
1. Apply CSS Responsive Menu.
<link href="dist/responsive-menu.css" rel="stylesheet">
2. Load the jQuery library and the Responsive Menu plug-in.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="dist/responsive-menu.js"></script>
3. Download modernizr.js or html5.
<script src="//cdn.jsdelivr.net/modernizr/2.8.3/modernizr.min.js"></script> <!--<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>-->
4. Create regular navigation from the nested navigation menu.
<nav class="rm-nav rm-nojs rm-lighten"> <ul> <li><a href="#">Main Item 1</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a> <ul> <li><a href="#">Sub Sub Item 1</a></li> <li><a href="#">Sub Sub Item 2</a></li> <li><a href="#">Sub Sub Item 3</a></li> <li><a href="#">Sub Sub Item 4</a></li> <li><a href="#">Sub Sub Item 5</a></li> <li><a href="#">Sub Sub Item 6</a></li> <li><a href="#">Sub Sub Item 7</a></li> </ul> </li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a> <ul> <li><a href="#">Sub Sub Item 1</a></li> <li><a href="#">Sub Sub Item 2</a></li> <li><a href="#">Sub Sub Item 3</a></li> <li><a href="#">Sub Sub Item 4</a></li> <li><a href="#">Sub Sub Item 5</a></li> <li><a href="#">Sub Sub Item 6</a></li> <li><a href="#">Sub Sub Item 7</a></li> </ul> </li> <li><a href="#">Sub Item 7</a></li> <li><a href="#">Sub Item 8</a></li> <li><a href="#">Sub Item 9</a></li> </ul> </li> <li><a href="#">Main Item 2</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a> <ul> <li><a href="#">Sub Sub Item 1</a></li> <li><a href="#">Sub Sub Item 2</a></li> <li><a href="#">Sub Sub Item 3</a></li> <li><a href="#">Sub Sub Item 4</a></li> <li><a href="#">Sub Sub Item 5</a></li> <li><a href="#">Sub Sub Item 6</a></li> <li><a href="#">Sub Sub Item 7</a></li> </ul> </li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> </ul> </li> <li><a href="#">Main Item 3</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> </ul> </li> <li><a href="#">Main Item 4</a></li> <li><a href="#">Main Item 5</a> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> </ul> </li> </ul> </nav>
5. Create a link to toggle the response list on the mobile device.
<a class="rm-toggle rm-button rm-nojs" href="#">Menu</a>
6. Call the plugin to enable the responsive menu.
$('.rm-nav').rMenu();
7. Complete 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' */ minWidth: '769px', /** * The opening and closing speed of the menus in milliseconds * @default 400 */ transitionSpeed: 400, /** * The jQuery easing function - used with jQuery transitions * @default 'swing' * @options 'swing', 'linear' */ jqueryEasing: 'swing', /** * The CSS3 transitions easing function - used with CSS3 transitions * @default 'ease' */ css3Easing: 'ease', /** * Use button as Toggle Link - instead of text * @default true */ toggleBtnBool: true, /** * The Toggle Link selector * @default '.rm-toggle' */ toggleSel: '.rm-toggle', /** * The menu/sub-menu selector * @default 'ul' */ menuSel: 'ul', /** * The menu items selector * @default 'li' */ menuItemsSel: 'li', /** * The class the plugin adds to the container of the nav element * @default 'rm-container' */ containerClass: 'rm-container', /** * The class the plugin adds to the nav element * @default 'rm-nav' */ navElementClass: 'rm-nav', /** * The class the plugin adds to the top menu element * @default 'rm-top-menu' */ topMenuClass: 'rm-top-menu', /** * The class applied to menu items that contain a sub-menu * @default 'rm-parent' */ parentClass: 'rm-parent', /** * The class applied to container element to trigger expanded layout * @default 'rm-layout-expanded' */ expandedClass: 'rm-layout-expanded', /** * The class applied to container element to trigger contracted layout * @default 'rm-layout-contracted' */ contractedClass: 'rm-layout-contracted', /** * Use CSS3 animation/transitions class name * @default 'rm-css-animate' * Do not use animation/transitions: '' */ animateClass: 'rm-css-animate', /** * Force GPU Acceleration class name * @default 'rm-accelerate' * Do not force: '' */ accelerateClass: 'rm-accelerate', /** * Use development mode - outputs information to console * @default false */ developmentMode: false
responsive drop down menu with submenu, jquery responsive menu Plugin/Github
See Demo And Download
Official Website(jbowyers): Click Here
This superior jQuery/javascript plugin is developed by jbowyers. For extra advanced usage, please go to the official website.