Créer un menu overlay sur wordpress

Comment créer un menu overlay sur wordpress ?

Voici un petit mémo pour afficher un menu overlay sur son site wordpress, comme celui ci :

Le menu est caché, et au clic sur l’icone du « menu burger » on fait apparaître notre menu dans un conteneur pleine page avec un effet d’opacité.

On va ici procéder en 3 étapes.

Tout d’abord je définis mon menu dans ma page,(header, home ou ailleurs selon la structure du thème ) et je l’entoure d’une div.overlay. Je place le html qui appelle les icônes d’ouverture et de fermeture de ma div. Le « bouton » d’ouverture étant toujours visible je le place en dehors du conteneur.
Je crée le css nécessaire pour afficher mon menu sous forme de liste dans une div pleine largeur.
Je crée le js nécessaire pour cacher/faire apparaître le menu.

Création de la structure du menu


<a href="javascript:;" class="overlay-open"><span class="lnr lnr-menu"></span></a>
<!-- Overlay content -->
<div class="overlay overlay-scale">
    <a href="javascript:;" class="overlay-close"><span class="lnr lnr-cross"></span></a>

    <nav role="navigation" class="home-navigation">  
        <?php
        wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => '',
            'fallback_cb' => '',
            'menu_id' => '',
            'depth' => 3,
        ));
        ?></nav>                   

</div>

La partie css

Je crée ensuite le css, à adapter en fonction de ses besoins bien sur:

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.9);
}

/* Position the content inside the overlay */
.overlay-scale {
    visibility:hidden;
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    z-index:999;
}


.overlay nav {
    text-align: center;
    position: relative;
    top: 50%;
    height: 60%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
    
}
.overlay ul li {
   
   height: calc(100% / 5);
    min-height: 54px;
    outline:none
   
}

La partie js

Puis dans un fichier js à part, je place mon code pour l’ouverture et fermeture du menu (code largement à améliorer, mais simplifié volontairement pour bien dérouler les étapes)


jQuery(document).ready(function(){
  jQuery(".overlay-close").css("display", "none");
    var isMenuOpen = false;
   jQuery('.overlay-open').click(function()
    {
        if (isMenuOpen === false)
        {
           jQuery(".overlay").fadeIn(500);
            jQuery('.overlay-close').fadeIn(500);
            jQuery(".overlay-open").fadeOut(500);  
             jQuery(".overlay-scale").css('opacity','1');
             jQuery(".overlay-scale").css('visibility','visible');
            isMenuOpen = true;
        } 
    });
  jQuery('.overlay-close').click(function()
    {
        if (isMenuOpen === true)
        {
           jQuery(".overlay").fadeOut(500);         
           jQuery(".overlay-open").fadeIn(300);  
           jQuery(".overlay-close").fadeOut(300);  
            isMenuOpen = false;
        }
    });
	});

Bien sur je n’oublie pas d’appeler ce fichier js via le fichier functions.php

16/06/2016 Mis à jour le 31/01/2020 Par Copier coller | Dans CSS, jQuery