jQuery ReSmenu v0.1.1

jQuery ReSmenu is a very simple and lightweight (~1Kb) jQuery plugin that collapse ul menus into selects on responsive layouts.

Download it on GitHub

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
});

Some examples

Example A - No options

$('#menu1').ReSmenu();

Example B - Collapse at 720px wide

$('#menu2').ReSmenu({
    maxWidth: 720
});

Example C - Menu with label

$('#menu3').ReSmenu({
    textBefore: 'Choose:'
});

Example D - Menu with first option

The active li won't be highlighted

$('#menu4').ReSmenu({
    selectOption: 'Choose:'
});

Some css

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 micc83@gmail.com or twitter for any issue or feauture request.