tablet-Ausrichtung zu ändern mit jquery und modernizr

Also ich habe ein nav-Menü, das ändert den Stil beim anzeigen von tablets im hoch-oder Querformat. Es klappt die letzten Menüpunkte in einem weiteren drop-down-Menü. Doch das Menü wird nicht aktualisiert nach Orientierung ändern, tun nur so, nach einem refresh.

Jquery-Modernizr-code: 

if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){
    //portrait stuff
        //unhides last few menu items
        $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block');

        //remove hide and first child class originally assigned to it from it's ul parent
        //then add the more list item to the end of the nav menu
        $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items');

        //grab the last two items of the nav menu and insert into the more list item menu
        $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu');
    }

Irgendwelche Vorschläge??

  • Du bist herzlich willkommen. Und zur Beantwortung deiner Frage - ich würde vorschlagen, fügen Sie ein resize Ereignis-listener und tun Sie Ihre Modernizr.mq wieder.
InformationsquelleAutor UniAvenger | 2012-09-16
  1. 6

    So scheint es, dass das einwickeln der Funktion in einem resize-listener macht es Arbeit! Schien auch besser zu funktionieren, wenn eine else-Anweisung. Nur brauchen, um weitere Tests auf anderen Geräten.

    Aktualisierten code:

    $(window).bind('resize', function(){

    if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){
    //portrait stuff
        //unhides last few menu items
        $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block');

        //remove hide and first child class originally assigned to it from it's ul parent
        //then add the more list item to the end of the nav menu
        $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items');

        //grab the last two items of the nav menu and insert into the more list item menu
        $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu');
    } else if(Modernizr.mq('(max-device-width: 1280px) and (max-device-height: 800px) and (orientation: landscape)') || Modernizr.mq('(max-device-width: 1024px) and (orientation: landscape)')){

        $('.moreMenu').children().appendTo('#menu-primary-items');

        $('.moreItem').addClass('hide first-child').appendTo('.moreItemHolder');

        $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block');

    }
});
    InformationsquelleAutor UniAvenger
Schreibe einen Kommentar