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 :

overlay menu

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