Exemple de fichier js de menu dynamique responsive :

jQuery(document).ready(function(){
    
    // Console de débogage pour mobile
    function mobile_log (message)
    {
        if( jQuery('#mobile_log')[0] == null )
        {
            jQuery('body > *').last().after('<div id="mobile_log" style="bottom:0;background-color:white;padding:5px;font-family:monospace;left:0;-moz-box-sizing:content-box;box-sizing:content-box;width:100%;">--- Console pour mobile ---<br/></div>' );
        }
        jQuery("#mobile_log").html( jQuery("#mobile_log").html()+message+"<br/>-----<br/>" );
    }
    
    function isMobile()
    {
        if( (jQuery(window).width() > jQuery(window).height() && jQuery(window).width() <= 900) || (jQuery(window).width() <= jQuery(window).height() && jQuery(window).width() <= 700) )
        {
            return true;
        } else {
            return false;
        }
    }
    
    function isMobilePortraitView()
    {
        if( (jQuery(window).width() > jQuery(window).height() && jQuery(window).width() <= 400) || (jQuery(window).width() <= jQuery(window).height() && jQuery(window).width() <= 700) )
        {
            return true;
        } else {
            return false;
        }
    }
    
    // Reset du viewport si nécessaire
    if( jQuery("#resetViewport")[0] )
    {
        var zed = setTimeout(function()
        {
            jQuery('meta[name="viewport"]').attr("content", "width=device-width, initial-scale=1.0");
        },200);
    }
    
    // Si on est pas sur une des pages du menu, on remet leur opacité à 1
    if(!jQuery('.current-menu-item').length)
    {
        jQuery('.menu-item, .sous-menu-pineau a').css({'opacity':1});
    }
    
    function checkWidth()
    {
        jQuery('#image-produit').height("").width("");// Remise à zéro pour les calculs
        if(!isMobile())
        {
            // On enlève la fonction d'affichage du #menu > div.table-cell
            jQuery('.sous-menu-pineau').off();
            jQuery('#menu').off();
            if( !jQuery('li.sous-menu-pineau').hasClass('current-menu-parent') )
            {
                jQuery('.sub-menu').dequeue().stop().fadeOut(0);
            }            
            jQuery('#menu > div.table-cell').dequeue().stop().fadeIn(0);
            // Gestion basique de l'animation du sous-menu pour le bureau
            jQuery('.sous-menu-pineau').on('mouseover', function()
            {
                jQuery('.sub-menu').dequeue().stop().fadeIn(400);
            });

            jQuery('.sous-menu-pineau').on('mouseleave', function()
            {
                if( !jQuery('.sous-menu-pineau').hasClass('current-menu-ancestor') )
                {
                    var timer;
                    timer = setTimeout(function()
                    {
                        jQuery('.sub-menu').fadeOut(1000);
                    }, 2000);
                }
            });
        } else 
        {
            // Gestion du redimentionnement des images produit
            if(isMobilePortraitView())
            {
                if(jQuery(window).height()*0.9 / (jQuery("#image-produit").attr("height")*1) * (jQuery("#image-produit").attr("width")*1) > jQuery(window).width() )
                {
                    jQuery('#image-produit').width( jQuery(window).width()*0.92+"px" ).height("auto");
                } 
                else if (jQuery('#image-produit').height() > jQuery(window).height()*0.9)
                {
                    jQuery('#image-produit').height( jQuery(window).height()*0.9+"px" ).width("auto");
                }
            }
            
            // On enlève les fonctions d'animation du sous-menu
            jQuery('.sous-menu-pineau').off();
            jQuery('#menu').off();
            jQuery('.sub-menu').dequeue().stop().fadeIn(0);
            if( jQuery('#menu-texte-mobile:hidden')[0] )
            {
                jQuery('#menu > div.table-cell').dequeue().stop().fadeOut(0);
            }
            // On applique l'animation du #menu > div.table-cell entier
            jQuery('#menu').on('click', function(e)
            {
                if( jQuery(e.target).parent().is(jQuery('div#menu')) )
                {
                    jQuery('#menu > div.table-cell').fadeToggle(400);
                }
            });
            
        }
    }
    
    checkWidth();// Premier lancement
    jQuery(window).on('resize', function() 
    {
        checkWidth();
    });
});