Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Some more improvements/enhancements #15

Open
amazingBytes opened this Issue · 2 comments

2 participants

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.