Bonjour,
Est-il possible d’avoir l’icône “hamburger menu” pour ouvrir / fermer le menu sur la vue responsive desktop?
Actuellement, cette icône n’est présente que sur la vue responsive mobile.
Ce n’est pas prévu puisqu’en mode desktop le menu est minifiable à gauche, sans avoir besoin d’être masqué comme sur un mobile.
Le bouton est masqué avec des classes bootstraps dans la ressource HEADER de la disposition responsive, pour n’être visible sur un écran XS :
<a href="#" class="main-nav-toggle hidden-sm hidden-md hidden-lg">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
Il faudrait déjà retirer les classes hidden.
et également revoir les CSS pour ne pas les limiter à la media query XS
@media screen and (max-width: 767px) {
.left-sidebar {
display: block;
margin: auto;
left: -300px;
width: 300px;
height: 100%;
transform: translate3d(0%,0,0);
transition: left .3s ease-out;
}
.left-sidebar.menu-show {
left: 0;
}
}
à surcharger dans la ressource STYLES de la disposition en retirant le media screen :
.left-sidebar {
display: block;
margin: auto;
left: -300px;
width: 300px;
height: 100%;
transform: translate3d(0%,0,0);
transition: left .3s ease-out;
}
.left-sidebar.menu-show {
left: 0;
}
afin de masquer le menu à gauche par défaut.
A tester mais l’idée est là.
1 Like
Merci, au niveau visuel, c’est ce que je veux.
Pour le comportement du hamburger menu, est-il possible d’avoir le même que la flèche en bas du menu?
Je voudrais que le menu affiche les icones des domaines sans le texte quand le menu est minimisé.
En fait, si je comprends bien, ce que vous voulez c’est plutôt que les boutons (>) et (<) qui se situent en bas en du menu se retrouvent dans le header (là ou est le menu sandwich en mode mobile) c’est ça ?
En effet le menu sandwich du mode mobile ne minifie pas le menu, il le masque. C’est donc sans doute pas celui là que vous voulez…
J’attire toutefois votre attention que ce que vous faites ici relève du bricolage sans aucune garantie de compatibilité en cas de de montée de version.
Oui, c’est ça.
Sur un desktop, je voudrais “combiner” le menu mobile et le menu desktop
- Avoir l’icone hamburger
- Minifier le menu au lieu de le masquer quand on clique sur l’icone hamburger
Ok je reformule:
Votre besoin est d’avoir, en mode desktop, le(s) bouton(s) minifier/agrandir au même emplacement que le bouton masquer/afficher du mode mobile
Idéalement ce bouton devrait avoir la même icone dans les 2 modes (même s’ils ne font pas la même chose), à savoir un “sandwich”
C’est, en effet, un peut une ergonomie “usuelle” qu’on retrouve désormais un peu partout. Ex: sur la console Google :
*
Je laisse @Francois statuer sur le fait qu’on met ça en place en standard, qu’on rend ça paramétrable pour permettre au designer de choisir, ou qu’on laisse ça dans le domaine des “bricolages hasardeux”
Personnellement je voterais plutôt pour que ça soit comme ça en standard, genre comme ça:
2 Likes
à faire comme tout le monde on n’est plus personne ;-)
sinon oui ce sera pas très dur à faire si c’est ça le besoin,
à mon avis en mettant une classe particulière sur le container de l’appli pour voir un nieme bouton MENU en haut / à la place du toggle “</>” en bas du menu : qui justement évitait d’alourdir le header avec le sandwich moche de tout le monde et bien mettre le logo à gauche comme toujours sur toutes nos applis desktop.
P24 :
Le menu a été revu pour mieux supporter le hover en mode minifié et permettre le scroll vertical dans le cas d’un trop grand nombre de domaines.
Pas d’autre choix que de mettre le bouton hamburger dans le header et retirer l’ancien bouton embarqué dans le menu qui ne permettait pas de le faire proprement.
Vous n’avez plus rien à faire.