Some more improvements/enhancements

[amazingBytes]

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()

[ghost]

Seems it is not working, don't know why. Can you post the complete script with the modifications?

[amazingBytes]

You can pick it up from http://www.constanzebeck.de/js/jquery.mobilemenu.js and see that it works for me.
Maybe, I've missed something to post. Thus, please don't hesitate to report any issue, this could be very helpful to others.

[trishac]

Love, love, love this! This is working for my second level items but leaves out my third level. I'm not sure how to get those added. Any suggestions?