Créer un menu overlay sur un seul item de menu

Comment créer un mega menu en overlay à partir d’un simple lien dans le menu

Pour un mega-menu classique, en version dropdown, on trouve d’innombrables plugins wordpress très efficaces. Vous en avez déjà une longue liste sur wpmudev par exemple. Notre but ici n’est pas d’avoir un « dropdown-menu » ( menu déroulant ) gigantesque, mais bien un sous menu qui prend toute la largeur de l’écran avec un effet d’opacité ou dans certains cas, une couleur d’arrière plan.

Dans un précédent tuto, je montrai un exemple de menu overlay classique, avec une icone d’ouverture et de fermeture. Tout le menu était intégré dans cette page pleine largeur.

Aujourd’hui, on va donc voir comment réaliser la même chose, mais à partir d’un seul item de menu. Pour rendre ce sous-menu plus attractif, on l’intègre dans un conteneur pleine largeur qui s’ouvre au clic. Voici donc les étapes.

Menu mega

La source

Ce tuto est largement inspiré d’un ce tutoriel en anglais qui explique comment créer un mega-menu classique. Il va même au delà puisqu’il donne la possibilité d’ajouter des widgets directement dans le menu. Son principe est de créer une sidebar qu’on appelle dans un  nouvel emplacement de menu, dans laquelle on collerait un widget menu, mais aussi n’importe quel autre type de  widget. Je reprend ici le même principe :

  • je crée un nouvel emplacement de menu dans le fichier functions.php.
  • Je crée mon menu en drag and drop via l’onglet menu du backoffice.
  • J’appelle ensuite ce menu dans mon fichier header.php.
  • Grâce au css et/ou au js, je le fais apparaître en pleine page avec un voile d’opacité.

Le menu principal

Dans un fichier à part, ou dans le header de mon thème, j’ai d’abord mon menu principal. Ici j’utilise boostrap 4. Pour le faire fonctionner, j’utilise une classe WP_Bootstrap_Navwalker(). Vous en trouverez différents exemples sur le net.

	<nav id="site-navigation" class="navbar fixed-top navbar-expand-lg" aria-label="<?php _e( 'Primary', 'virtualtrip2017' ); ?>">
			<div class="container-fluid">
					<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<?php 
				$custom_logo_id = get_theme_mod( 'custom_logo' );
				$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
				if ( has_custom_logo() ) {
				        echo '<img alt="'. get_bloginfo( 'name' ) .'" src="'. esc_url( $logo[0] ) .'">'; 
				};?></a>
					<button class="navbar-toggler navbar-dark navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="main-navbar-collapse" data-target="#main-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
				        <span class="navbar-toggler-icon"></span>
				    </button>
				
				<div class="collapse navbar-collapse" id="main-navbar-collapse">
					<?php wp_nav_menu( array(
						'menu'              => 'primary',
						'theme_location' => 'primary',
						'depth'             => 0,
						'container'         => false,
						'container_class'   => 'collapse navbar-collapse',
						'container_id'      => 'main-navbar-collapse',
						'menu_class'        => 'navbar-nav ml-auto',
						'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
						'walker'            => new WP_Bootstrap_Navwalker())
					); ?>
				</div>
			</div><!-- .container -->
		</nav>

 

L’enregistrement du mega menu

Afin de pouvoir afficher notre mega menu, on va d’abord l’enregistrer dans le fichier functions.php, à l’intérieur de la fonction after_setup_theme. Voici le code de déclaration du nouvel emplacement de menu.

register_nav_menus( array(
    'mega_menu'   => __( 'Mega Menu', 'votre_text_domain' ),
    ) );

Création du mega-menu

Maintenant, dans le backoffice de wordpress, on peut créer notre mega-menu en sélectionnant notre nouvel emplacement de menu. On y intègre les pages ou catégories que l’on veut.

mega menu example on wordpress

Le menu principal

Dans le menu principal, à l’endroit du lien qui nous intéresse, on va rajouter la classe ‘has-mega-menu‘ . On crée unlien personnalisé, mais comme on ne veut pas qu’il redirige quelque part, on y insère un # en guise de lien.

mega menu wordpress

Le mega menu

Dans notre  fichier header.php, à la suite du menu principal, on va créer la fonction qui va « scanner » ce mega-menu et nous afficher tous les liens en front. Ici le css est à adpater en fonction de ses besoins.

<div class="overlay overlay-scale">
	<a href="javascript:;" class="overlay-close"><i class="fas fa-external-link-alt"></i></a>
	<div class="mega-menu h-100">
	<div class="container h-100">
		<div class="row h-100">
		   <div class="col-sm-12 my-auto mx-auto">
			   	<ul>
	                <?php
	                    $locations = get_nav_menu_locations();
	                    if ( isset( $locations[ 'mega_menu' ] ) ) {
	                        $menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' );
	                        if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
	                            foreach ( $items as $item ) {
	                                echo "<li class='col-12 col-md-4 col-lg-2 text-center'>";
	                                    echo "<a href=\"{$item->url}\">{$item->title}</a>";
	                                 
	                                echo "</li>";
	                            }
	                        }
	                    }
	                ;?>
					</ul>
                 </div>
            </div>
        </div>
    </div>
</div>

La partie css

Voici notre partie css, qui peut servir d’exemple.

.overlay {
.overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9910;
	background:rgba(0,0,0,0.8);
	visibility:hidden;
	opacity:0;
	    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;

}
.open{
	opacity:1;
	visibility:visible;
}
overlay
/* Position the content inside the overlay */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
}
.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}
.overlay ul li {
	display:inline-block;
	min-height: 54px;
}
.fa-external-link-alt {
	display: block;
	z-index: 999;
	font-size: 20px;
	color: #999;
	background:transparent;
	-webkit-transition: 0.6s ease-out;
	-moz-transition: 0.6s ease-out;
	-o-transition: 0.6s ease-out;
	transition: 0.6s ease-out;
	cursor: pointer;
}
.fa-external-link-alt:hover {
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.overlay-close {
	position: absolute;
	left: 2em;
	top: 4em;
	z-index: 999
}
.mega-menu a:hover{
	color:#fff;
}
.mega-menu a:before,
.mega-menu a:after{
	display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s,opacity .2s;
    -moz-transition: -moz-transform 0.3s,opacity .2s;
    transition: transform 0.3s,opacity .2s;
}
.mega-menu a:hover:before,
.mega-menu a:hover:after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

.mega-menu a:before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
}
.mega-menu a:after{
	margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
}

La partie js

Ensuite, on va afficher/cacher notre menu grâce au js. Au clic sur le lien, on ajoute la classe « open« , et au clic sur l’icone de fermeture, on retire la classe « open« .

jQuery(document).ready(function(){
 
   
   jQuery('.has-mega-menu').click(function(e){
	    e.preventDefault();
             jQuery(".overlay,.overlay-close").addClass('open');
        });
  jQuery('.overlay-close').click(function(){
			 jQuery(".overlay,.overlay-close").removeClass('open');    
    });
  });

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

Mis à jour le Par Copier coller | Dans wordpress