I'm looking at your demo and noticed that the responsive select menu only works 2 levels deep. Are you planning on extending the functionality to support deeper nesting?

Demo broke and does not work on chrome ie , safari

Hi there!

I found a bug with this line:

https://github.com/mattkersley/Responsive-Menu/blob/master/jquery.mobilemenu.js#L90

The [href=http://foo.com] selector needs to have the URL wrapped in double quotes like this:

[href="http://foo.com"]

To avoid an invalid expression error in Chrome and possibly others.

Regards,
Marshall

Hi,

Maybe I missed it, but is there an option to replace in place when using combine: false option?

I'd like to replace 4 <ul>'s in my footer with <select>s.

I like the ability to not combine, but it's less useful only having the ability to specify one element to append the <select>s to.

Anyway, I'm sure your busy... Just thought I would throw that out there. :)

Thanks again!

Cheers,
Micky

Hey, maintainer(s) of mattkersley/Responsive-Menu!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mattkersley/Responsive-Menu is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mattkersley/Responsive-Menu",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

It would be cool/more semantic/more accessible to add optgroups to group together the related second-level links, rather than just visually indenting them. It could work like this:

The list (can't get Github list markup to work, sorry!):

1. Vegetables
2. Fruit
   2a. Apples
   2b. Bananas
   2c. Oranges

The select:

      <optgroup label="Vegetables">
        <option>Vegetables main page</option>
      </optgroup>
      <optgroup label="Fruit">
        <option>Fruit main page</option>
        <option>Apples</option>
        <option>Bananas</option>
        <option>Oranges</option>
      </optgroup>
    </select>```

I've got more than one menu I want to target with mobileMenu (just 2 in my case).
But only the first instance is executed correctly.
The second one doesn't get the select-element prepended in the DOM, but it's UL-element will be hidden (display:none).
If I change the order, the opposite happens.

Here's my code:

// mobile menu
$('#menu-main').mobileMenu({
topOptionText : DL.txt.selectPage,
prependTo : '.top_menu .menu',
indentString: '   ',
switchWidth : 768
});
$('#menu-left').mobileMenu({
topOptionText : DL.txt.selectPage,
prependTo : '.secondary',
indentString: '   ',
switchWidth : 479
});


It would be great if the script could optionally auto-detect if the device is touch enabled (like the Modernizr .no-touch/.touch test) and always show for those devices - regardless of screen width. As well as the standard method of transforming to select at certain breakpoint.

Is that possible?

Hi! Thanks for this awesome plugin. :)

Any chance you could include a version number (and perhaps a simple changelog in the readme)?

I've always been keen on plugins that include a multi-line comment at the top of their plugin (minimized included):

/*
 * jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
 * http://benalman.com/projects/jquery-dotimeout-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

At the very minimum, a version number makes it easy for end users to spot upgrades. :)

I've always liked this convention:

A normal version number MUST take the form X.Y.Z where X, Y, and Z are non-negative integers. X is the major version, Y is the minor version, and Z is the patch version. Each element MUST increase numerically by increments of one. For instance: 1.9.0 -> 1.10.0 -> 1.11.0.

More info here.

Lastly, I ussually ad version numbers to plugin file names (if I include them individually), for example:

jquery.mobilemenu-1.0.0.min.js

Thanks for your consideration!

Cheers,
Micky

it would be nice if the sub levels would be indented on a smartphone like in the desktop version of the drop down.
don't know though if this is supported on ios and similars.

Hi Matt, This is brilliant - thanks. I've been doing my head in trying to implement a megamenu with this and hoped you might point me in the right direction: I tried adding this

function stripDivs($this){
if(isMobile()) {
var myLis = [];
myLis = $('div.megacolumn-content').find('li');
$('ul.megamenu').remove();
$(myLis).wrap('

after function isMobile is defined but no luck yet. The li with the class here is just the first list item in the top nav ul. The idea was to write a script that would extract li's buried in divs and store them, lose the parent divs those lis were nested inside of and then reintroduce them as just more li's so that your script could find, index and include them when building the mobile menu select/option group.
The functionality to parse the list and add select tags seems to break with this inclusion. or maybe an errant div tag? Does the logic seem sound enough? Thanks again for sharing this script. I hope I'm not rude to ask this.

var settings = {
    // ...
    selectedOpt: false // adds selected-attribute by text or value
}

Add function:

function addSelectedAttribute(value, text, container) {
    s = (settings.selectedOpt && (settings.selectedOpt == text || settings.selectedOpt == value)) ? " selected ": false;
    $('<option value="'+value+'" '+s+'>'+text+'</option>').appendTo(container);     
}

Edit function 'createOption':

//function to create options in the select menu
function createOption($item, $container, text){

    //if no text param is passed, use list item's text, otherwise use settings.groupPageText
    if(!text){
        addSelectedAttribute( $item.find('a:first').attr('href'), $.trim(getText($item)), $container );
    } else {
        addSelectedAttribute( $item.find('a:first').attr('href'), text, $container );
    }

}//createOption()

Only works for default options, but i think it's easy to making it available for opt-groups.

While I appreciate your intentions of trying to get your code out to the widest range of audiences, unfortunately not having a license makes things more complicated for the people who care. If you would like to make your software available to the widest range of groups I would suggest using the MIT license. http://opensource.org/licenses/mit-license.php When you don't add a license it is subject to the copyright rules of the country you created it in which may be incompatible with other licenses. In the case of the US it's all rights reserved which means you must specifically give permission for people to use your software.
Something else to read: http://www.codinghorror.com/blog/2007/04/pick-a-license-any-license.html

Hi Matt,

I know you say that this plugin doesn't have a license but might I suggest you add one. If yo really don't care what people do you can add the "Do What the Fuck You Want to Public License" http://www.wtfpl.net/

This basically just ensures others that they can use your code :)

Lines 53 and 60 add inline styles to display: none; display: block;.

Clearing all inline styles when exiting mobileMenu will allow the host sites styles to do as they please without needing to get into a specificity war.

I was wondering if you have had any issues with the arrow not displaying on android devices? The thing works but there is not arrow displayed so people are not aware that it is actually a drop down menu and not just a text field or something

I notice that the required format for adding the menu to an element is ul#id. Would it not be more selector efficient to just require #id?

Hi, I think this is related to #5. When <optgroup> and <option> tags are mixed in the top-level nav (i.e., some main menu items have children and some don't) a top-level <option> is visually indistinguishable from nested <option>. Attaching some browserstack screenshots.

It's not a bug in this plugin's code, but still makes the menu visually confusing. I wonder if anyone's noticed this and thought about a solution?

Screenshots show the index.html packaged with the repo.

To prevent the first option from being clickable I'd like to suggest the following addition of a function and a slightly change of code.

New function:

//function to create first option in the select menu
function createFirstOption($container){

        $('<option selected="selected" disabled="disabled" value="0">'+settings.topOptionText+'</option>').appendTo($container);
}//createFirstOption()

Within the function createSelect() use instead of

    //create default option if the text is set (set to null for no option)
    if(settings.topOptionText){
        createOption($('<li>'+settings.topOptionText+'</li>'), $select);
    }

the code

    //create default option if the text is set (set to null for no option)
    if(settings.topOptionText){
        createFirstOption($select);
    }

iOS does not respect sub-level   spaces. (Running v4.3.4).

I tested an Android device (no idea which one), and the spaces were rendered properly.

Hi there,

Firstly, thanks for this function. I've found it of great use for responsive navigation.

I'd like to ask if there is a simple way to have more than one menu in a page, displaying separate lists. Is this possible using the code as it is?

Regards,
Bry

I wanted to put the complete mobileMenu into a div container and the option to put some markup in front of the dropdown boxes, e.g. as a label. Therefor I've changed some functions of the original version 2.

1. additional option "prependMarkupToMenu":

//plugin's default options
var settings = {
    combine: true,                  //combine multiple menus into a single select
    groupPageText: 'Main',          //optgroup's aren't selectable, make an option for it
    nested: true,                   //create optgroups by default
    prependTo: 'body',              //insert at top of page by default
    prependMarkupToMenu: '<h3 class="mnav">Menu:</h3>',             //Markup to be prepended just bevor the menu(s)
    switchWidth: 800,               //width at which to switch to select, and back again
    topOptionText: 'Go to...'       //default "unselected" state
},

2. new function createFirstOption() to prevent topOptionText from being clickable:

//function to create first option in the select menu
function createFirstOption($container){

        $('<option selected="selected" disabled="disabled" value="0">'+settings.topOptionText+'</option>').appendTo($container);
}//createFirstOption()

3. changed function createSelect():

//function to create <select> menu
function createSelect($menu){

    //create <select> to insert into the page
    var
    $select = $('<select class="mnav" id="mm'+menuCount+'" />');
    menuCount++;

    //create default option if the text is set (set to null for no option)
    if(settings.topOptionText){
        createFirstOption($select);
    }

    //loop through first list items
    $menu.children('li').each(function(){

        var $li = $(this);

        //if nested select is wanted, and has sub-nav, add optgroup element with child options
        if($li.children('ul, ol').length && settings.nested){
            createOptionGroup($li, $select);
        }

        //otherwise it's a single level select menu, so build option
        else {
            createOption($li, $select);         
        }

    });
    //add change event and prepend menu to div#outer_nav
    $select
        .change(function(){goTo($(this).val());})
        .appendTo('#outer_mnav');

}//createSelect()

4. changed function runPlugin():

function runPlugin(){

    //menu doesn't exist
    if(isMobile() && !menuExists()){

        $('<div id="outer_mnav" class="mnav" />')
            .prependTo(settings.prependTo);
        $(settings.prependMarkupToMenu)
            .appendTo('#outer_mnav');

                //if user wants to combine menus, create a single <select>
        if(settings.combine){
            var $menu = combineLists();
            createSelect($menu);
        }

        //otherwise, create a select for each matched list
        else{
            $menus.each(function(){
                createSelect($(this));
            });
        }
    }

    //menu exists, and browser is mobile width
    if(isMobile() && menuExists()){
        $('.mnav').show();
        $menus.hide();
    }

    //otherwise, hide the mobile menu
    if(!isMobile() && menuExists()){
        $('.mnav').hide();
        $menus.show();
    }

}//runPlugin()

I identified two "console.log(...);" lines that breaks everything on windows phones...

It is actually not an issue or maybe I'm doing wrong way, not sure, so posting here.

I have tried but not working for me. I'm trying to style the 'select dropdown menu' like here (for smaller screen)
http://bavotasan.com/2011/style-select-box-using-only-css/

Any help will be highly appreciated.

thanks!

I'm sure this is super basic, but I keep getting a Plugin failed when I try to use for WordPress. What am I doing wrong? Pls help.

Could a feature be added for the currently open page to be selected.

It would involve adding the class selected="selected" to the item if the URL matched the current page.