micc83/resmenu

jQuery ReSmenu - Select based responsive menu

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.

To use it you just have to include jQuery and a copy of the plugin in your head or footer:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.resmenu.min.js"></script>

Let's say this is your menu:

<div class="menu_container">
    <ul class="toresponsive">
        <li><a href="/">Home</a></li>
        <li class="current-menu-item"><a href="test.htm">Link</a></li>
        <li><a href="test.htm">Link 2</a></li>
        <li><a href="test.htm">Link 3</a></li>
        <li><a href="test.htm">Link 4</a></li>
    </ul>
</div>

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:

.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 contacts

ReSmenu has been made by me. You can contact me at [email protected] or twitter for any issue or feauture request.

resmenu's Issues

Changing menu hover when menu open for smaller media platforms

Hi All. This area new to me but Im dedicated in learning.

I been trying for 2 days now. And I still cant find how to change the responsive menu when the screen gets smaller. When you open the menu, Where do i change the hover color from blue to another color .. when one is on a smart phone or tablet . Also how to change that grayed out house plan, since it has no link, just #, to just be white, same color as others?

I been able to change everything else.

You can view attach to see blue and grayed out house
Also margin between each category so more space for those who have bigger fingers. So easier for them to choose category they want and not click on one above or below.

Im sure its something stupid im missing. But desperate. I seee how different it is now on an ipod. Turns into a 3d button
1st time i have seen something be so different - from browser size down to mobile phone. Usually stay s colors i set it all. This my 1st at creating drop downs

I so thank you for your help

Change the order of the options

Hi,

Thanks a bunch for your easy to use and nice menu.

On desktop resolutions, my homepage is the center element of the list of navigation elements.

For mobile, it's not so user-friendly to have the homepage as the third option to select. Is there any way I can change the order of the options?

Any callback function I can use for some jQuery magic?

Thanks a bunch.

Proposal: Optional styling

Hi there,

I usually add an "hamburger" icon on my select to make it more obvious that it is a navigation element. Here's how I normally do it: http://jsfiddle.net/SiamKreative/KCPb7/

I only tried on:

• Desktop: latest version of Chrome and Firefox
• Mobile: Android 4.0 default browser

Feel free to share the CSS ;)

Proposal: option to prepend text to selected option

Hi Alessandro,

I'm in love with your plugins (so far)... I'm dropping http://tinynav.viljamis.com/ for ReSmenu ;)

How about an option to append text (and eventually glyphs) before the selected option value? I used to do it manually with TinyNav. For instance I want to add You're here &rarr:

This option would offer an alternative to the option textBefore, for users who don't want to have a "label" outside.

What do you think?

Does not work in Opera Mini

Hello! I really like your menu, but it does not work in Opera Mini. Please help to solve this problem.