DIVI

 

Introduction au menu mobile Divi

Le menu mobile Divi se compose grossièrement de deux éléments :

  • l’entête, défini par les divs .logo_container et #et-top-navigation, inclus dans le div #main-header ;
  • le menu déroulant, défini par la liste ul#mobile_menu, encapsulée dans le div .mobile_nav, lui même encapsulé dans #et-top-navigation.
  1. <header id=« main-header« >
  2. <div class=« container clearfix et_menu_container »>
  3. <div class=« logo_container« ></div>
  4. <div id=« et-top-navigation« >
  5. <div id=« et_mobile_nav_menu »>
  6. <div class=« mobile_nav opened »>
  7. <span class=« mobile_menu_bar mobile_menu_bar_toggle »></span>
  8. <ul id=« mobile_menu«  class=« et_mobile_menu »></ul>
  9. </div>
  10. </div>
  11. </div> <!– #et-top-navigation –>
  12. </div> <!– .container –>
  13. </header>

Icône de fermeture

Le minimum syndical (quand-même, ET…), on remplace le hamburger par une croix lorsque le menu est ouvert :

  1. @media only screen and (max-width: 980px) {
  2. .mobile_nav.opened .mobile_menu_bar:before {
  3. content: « \4d »;
  4. }
  5. }

Suppression des marges

Les marges droite et gauche du menu mobile Divi doivent être supprimées. D’une part pour préserver vos yeux, et d’autre part pour pouvoir afficher proprement le menu en plein écran ou pleine largeur, et obtenir des transitions propres.

On doit donc élargir le conteneur principal et adapter la position du logo et de l’icône hamburger :

 

  1. @media only screen and (max-width: 980px) {
  2. #main-header .container.clearfix.et_menu_container {
  3. width: 100%;}
  4. .logo_container {
  5. padding-left: 30px;}
  6. #et-top-navigation {
  7. padding-right: 30px;
  8. }
  9. }

Positionnement du menu

Le menu peut être affiché sous l’entête, ou démarrer en haut de l’écran (pleine hauteur ou plein écran). Dans le second cas, on supprime le bord supérieur de couleur qui sinon se retrouverait collé en haut de l’écran, et on ajoute un padding vertical pour laisser la place au logo et à l’icône de fermeture du menu. Il faut également positionner le z-index du logo et du bouton de fermeture au-dessus du menu déroulant pour y avoir encore accès.

Un menu slide-in horizontal peut venir de la droite ou de la gauche, donc on fixera sa position d’un côté ou de l’autre, et on positionnera le côté opposé en automatique puisque la largeur du menu peut être variable.

  1. @media only screen and (max-width: 980px) {
  3. #mobile_menu {
  4. display: block !important;
  6. /* Slide-in droite */
  7. right: 0;
  8. left: auto;
  9. /* Slide-in gauche */
  10. right: 0;
  11. left: auto;
  12. /* Expand */
  13. right: 0;
  14. left: 0;
  16. /* Sous l’entête */
  17. top: 80px;
  18. /* Plein écran ou pleine hauteur */
  19. top: 0;
  20. padding-top: 80px;
  21. border-top: none;
  22. }
  24. /* Pleine hauteur */
  25. .mobile_menu_bar, #logo {
  26. z-index: 10000;
  27. }
  29. }

Largeur du menu

La largeur du menu est de 100% par défaut, mais on peut simplement la modifier avec :

  1. @media only screen and (max-width: 980px) {
  3. #mobile_menu {
  4. width: 400px;
  5. }
  7. }

A noter qu’on pourra si besoin utiliser un media query pour limiter la largeur du menu au-delà d’une certaine taille d’écran, mais la repositionner à 100% en-deça pour éviter un affichage trop serré :

  1. @media only screen and (max-width: 480px) {
  3. #mobile_menu {
  4. width: 100%;
  5. }
  7. }

Hauteur du menu

La hauteur du menu s’adapte par défaut à la longueur de la liste contenant les éléments du menu, ce qui nous va très bien.

Mais on pourra imposer au menu d’occuper au moins la hauteur de l’écran (menu plein écran ou slide in pleine hauteur) :

  1. @media only screen and (max-width: 980px) {
  3. #mobile_menu {
  4. min-height: 100vh;
  5. }
  7. }

ou seulement la hauteur disponible sous l’entête :

    1. @media only screen and (max-width: 980px) {
    3. #mobile_menu {
    4. min-height: calc( 100vh – 80px );
    5. }

Ressources

Nouveaux styles de menu mobile pour Divi