Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/micc83/resmenu
jQuery ReSmenu - Select based responsive menu
https://github.com/micc83/resmenu
jquery jquery-resmenu menu responsive
Last synced: 2 months ago
JSON representation
jQuery ReSmenu - Select based responsive menu
- Host: GitHub
- URL: https://github.com/micc83/resmenu
- Owner: micc83
- Created: 2013-11-18T17:02:35.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-09-01T08:24:14.000Z (over 4 years ago)
- Last Synced: 2024-10-13T04:21:44.020Z (2 months ago)
- Topics: jquery, jquery-resmenu, menu, responsive
- Language: JavaScript
- Homepage: https://micc83.github.io/ReSmenu/docs/
- Size: 21.5 KB
- Stars: 63
- Watchers: 6
- Forks: 13
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jQuery ReSmenu
=======**jQuery ReSmenu** is a very simple and lightweight (~1Kb) jQuery plugin that collapse ul menus into selects on responsive layouts. You can find some examples in the included demo or [here](https://micc83.github.io/ReSmenu/docs/).
To use it you just have to include jQuery and a copy of the plugin in your head or footer:
Let's say this is your menu:
Now the only thing to do is to trigger the menu with:
$(window).ready(function () {
$('.toresponsive').ReSmenu();
});If you need more control here's the plugin settings:
$('.toresponsive').ReSmenu({
menuClass: 'responsive_menu', // Responsive menu class
selectId: 'resmenu', // select ID
textBefore: false, // Text to add before the mobile menu
selectOption: false, // First select option
activeClass: 'current-menu-item', // Active menu li class
maxWidth: 480 // Size to which the menu is responsive
});
## Let's style your select**ReSmenu** runs out of the box but if you want to style your select to better fit the container you can take advantage of the short css style taken from [twitter bootstrap](http://getbootstrap.com/):
.responsive_menu select {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: rgb(85, 85, 85);
vertical-align: middle;
background-color: rgb(255, 255, 255);
background-image: none;
border: none;
}
## Credits and contactsReSmenu has been made by [me](https://micc83.github.io/ReSmenu/docs/). You can contact me at [email protected] or [twitter](https://twitter.com/Micc1983) for any issue or feauture request.