11521 sujets

JavaScript, DOM et API Web HTML5

Responsive & javascript toggle menu

bonjour
en réduisant la taille ( width) du navigateur un menu peut s adapter a cette taille .
L'adaptation se fait pour le changement style grâce aux mediaqueries. Si j agrandi cette taille au dessus de la valeur de breakpoint ; le menu rechange de style.

En suposant que j'ai 2 breakpoints ( BP) et que mon menu est mobile first :
menu0 sans javacript ( petit écran) <BP1> menu1 javascript1 <BP2> menu2 javascript2

Comment ce passe la gestion ( chargement / désactivation, modification des nom des sélecteurs ) des scripts au niveau des breakpoints ? Y a t il des MQ pour les javascripts ? Que deviennent les scripts non utilisés ?

cordialement
Modifié par 75lionel (03 Feb 2015 - 01:03)
Si ça peut t'aider :


        function viewport() {
            var e = window, a = 'inner';
            if (!('innerWidth' in window )) {
                a = 'client';
                e = document.documentElement || document.body;
            }
            return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
        }


malheureusement je n'ai plus la source où j'ai trouvé ce code.

Il permet d'avoir exactement le même height/width qu'aura ton media query.

Il te reste plus qu'à écouter le resize (avec jquery $(window).on('resize', function() { ...code... }); )
Et selon le width ( var widthViewport = viewport().width; ) tu actives ou non le javascript nécessaire.
Sujet clos
Aller à