====== Menus dynamiques ====== 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('
--- Console pour mobile ---
' ); } jQuery("#mobile_log").html( jQuery("#mobile_log").html()+message+"
-----
" ); } 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(); }); });