Forum : Menu Responsive & transitions

Bonjour à tous je suis nouveau sur le site que j'ai découvert grâce au tuto sur le menu responsive. Tuto très bien détaillé.
<br>Cependant je suis en train d'entrainer et je fais face à une difficulté que j'espère résoudre.
<br>Voila le pb : lorsque je paramètre les transitions, elles fonctionnent parfaitement.
<br>Cependant lorsque j'aggrandis ma fenetre, les transitions se mettent en place pour revenir au menu classique.
<br>Et inversement lorsque je réduis pour aller sur le responsive, il y a le menu classique "vole" jusqu'à se positionner à l'endroit où il est supposé être en responsive
<br> Le problème est que la seule transition qui m'intéresse c'est lorsque je CLIQUE sur headericon (le hamburger) et que je déclique le menu !
<br> Pourquoi css comprend il que la transition s'applique toujours ? Et comment résoudre ce problème ?<br>
Merci d'avance de votre aide à tous ;)

3 réponses

Lemon,

il y a 10 ans

salut,jai pas très bien compris ton probleme mais regarde du coter des media queries ou sinon montre nous un bout de ton code pour qu'on puisse te venir en aide?

cakecode,

il y a 10 ans

J'ai fait en sorte de commencer par la version mobile donc j'ai ajouté la média query @media only screen and (min-width: 960px) pour les écrans@media only screen and (min-width: 960px)
En dehors de cette media query (donc dans la partie "petits écrans"), il y a le code suivant :

float : left ; display : block ; position : fixed ; top : 66px; left : 0px; bottom : 0px ; width : 250px ; min-height : 100% ; z-index : 5 ; background-color : #E8E8E8 ; transform: translateX(-250px); transition-duration : 1s;``` Ainsi que .with--sidebar #menu{ transform: translateX(0px); } Du coté html, rien de plus basique : <header> <a href="#" id="header__icon" ></a> <a href="#" id="header__logo" ><img src="logo.gif" valign="middle" alt="logo" width=92 height=33/></a> <nav id="menu"> <a href="#">Home</a> <a href="#">Categories</a> <a href="#">About us</a> <a href="#">Contact us</a> <a href="#">Q.A.</a> </nav> </header> Donc voila le code simple. Je précise que ce qui m'intéresse ce n'est pas que toute la page bouge lors de l'affichage du menu, mais simplement que le menu s'affiche par dessus la page. J'ai désactivé également "transition duration" dans la partie "ordinateur" des media queries. Ce qui implique que lorsque j'aggrandis ma fenêtre, on ne voit pas la transition allant du menu responsive au menu ordi, mais lorsque je fais le chemin inverse, on voit la transition ordi => menu responsive. Et d'ailleurs, même si le menu responsive n'est pas affiché (puisque pas encore de clic sur le hamburger) on le voit quand même faire cette transition jusqu'a se cacher derriere (à -250px ...) J'imagine qu'il faudrait éventuellement passer par du jquery pour paramétrer la transition duration uniquement lorsque souhaité ? Ou avez vous une autre idée ... Merci d'avance

Astor,

il y a 10 ans

Hello, alors quand tu commences à utiliser les transitions tu as plusieurs paramètres à renseigner. Les trois plus importants sont la propriété sur lequel va agir la transition (transition-property), la durée de ta transition (transition-duration) et la façon dont va se dérouler ta transition(transition-timing-function). Je pense que tu as compris en quoi consistait les deux premiers, le troisième c'est par exemple une transition "banale" avec la même vitesse ou une transition qui va accélérer au début et ralentir sur la fin. Bref, de base cette propriété est à "ease" ce qui correspond à quelque chose de neutre.

Ici ton menu à besoin de savoir quelle propriété animer parce que tu ne lui as pas précisé, du coup ton navigateur n'est pas con il se dit qu'il va tout animer... Voilà ce que ça devrait donner :

#menu { transition-property: transform; transition-duration: 1s; transition-timing-function: ease; }

Tu peux aussi l'écrire comme cela :

#menu { transition: transform 1s ease; }

Et si tu as plusieurs propriétés à animer, ça marche comme ça :

transition-property: transform, opacity;

Donc voilà, j'espère avoir était clair, tout est une question de transition-property ! Il y a une doc assez cool de mozilla il me semble ? A rechercher sur google !

Valentin