Créer un menu overlay sur wordpress

Petit mémo pour la création d’un menu overlay, comme celui ci:

overlay menu

On voit de plus en plus ce genre de menu, avec toute sorte d’apparence.

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 ) je l’entoure d’une div.overlay, et   je place le html qui appelle les icones d’ouverture et de fermeture de ma div.

<!-- Button to close the overlay navigation -->
<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>

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
   
}

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.