← Back
Editing: README.md
# slimMenu jQuery Navigation Menu Plugin. ### slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! ## Features: * Multi-level nested menus. * 100% mobile responsive menus. * Multiple slimMenu navigations on the same page. * Tap areas to toggle sub menus easily in touch devices. * Hover option and effects for desktop version. * Sub menu indentation options for responsive version. ## Browser Support: (Tested on following browsers and confirmed that the slimMenu is working.) * IE 9+ * Latest Chrome * Latest Firefox * Latest Safari * Latest Opera * Android 2.2+ * Mobile Safari ## Installation: Add *dist/css/slimmenu.min.css* to the head of your document: <link rel="stylesheet" href="slimmenu.min.css" type="text/css"> Add *dist/js/jquery.slimmenu.min.js* after jQuery plugin and before closing body tag. <script src="jquery.slimmenu.min.js"></script> Create your navigation menu using an ordered list and add *slimmenu* class: <ul class="slimmenu">...</ul> Initilalize the plugin: $('.slimmenu').slimmenu( { resizeWidth: '767', /* Navigation menu will be collapsed when document width is below this size or equal to it. */ initiallyVisible: false, /* Make main navigation menu initially visible on mobile devices without the need to click on expand/collapse icon. */ collapserTitle: 'Main Menu', /* Collapsed menu title. */ animSpeed: 'medium', /* Speed of the sub menu expand and collapse animation. */ easingEffect: null, /* Easing effect that will be used when expanding and collapsing menu and sub menus. */ indentChildren: false, /* Indentation option for the responsive collapsed sub menus. If set to true, all sub menus will be indented with the value of the option below. */ childrenIndenter: ' ' /* Responsive sub menus will be indented with this character according to their level. */ expandIcon: '<i>▼</i>', /* An icon to be displayed next to parent menu of collapsed sub menus. */ collapseIcon: '<i>▲</i>' /* An icon to be displayed next to parent menu of expanded sub menus. */ }); **Optional** Add easing plugin after jQuery plugin and before closing body tag if you want to use easing effects. <script src="**PATH_TO_PLUGIN**/jquery.easing.min.js"></script> ## Support If you need help using slimMenu, have a suggestion or idea, or have found a bug, please create an issue.
Save File
Cancel