Bonjour

J'ai actuellement une barre de navigation dynamique qui s'ouvre et se ferme en slide à l'aide d'un bouton mais celui ci est séparé de la barre et j'aimerais qu'il soit inclus dans la barre des menus.

Pour le moment j'ai donc ceci

Nom : nav1.PNG Affichages : 118 Taille : 10,4 Ko

Nom : nav2.PNG Affichages : 119 Taille : 39,4 Ko

Et donc son code dans le header.php

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<body <?php body_class();?>>
	<?php wp_body_open(); ?>
    <div class="container">
		<header class="main-header">
			<div class="logo">
				<?php if(!is_front_page()){
					?><a href="<?= home_url(); ?>"><?php
				}?>
				<img src="<?= get_stylesheet_directory_uri();?>/pics/logosss.png" alt="logo" width="400" height="200"/>
				<?php if(!is_front_page()){?></a><?php }; ?>
			</div>
			<nav class="main-nav">
				<button aria-expanded="false" aria-controls="main-menu" class="togle">Menu</button>
				<?php 
				wp_nav_menu(
					[
						'theme_location'=>"menu-du-header",
						'items_wrap'    => '<ul id="main-menu" class="menu" hidden>%3$s</ul>'
					]
				);
				?>
			</nav>
       	</header>
	</div>
Le JS :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
const toggleMenu = document.querySelector('.main-nav button');
const menu = document.querySelector('#main-menu');
 
toggleMenu.addEventListener('click', function() {
  const open = JSON.parse(toggleMenu.getAttribute('aria-expanded'));
  toggleMenu.setAttribute('aria-expanded', !open);
  menu.hidden = !menu.hidden;
});
Et voila ce que j'aimerais :

Nom : nav1.1.png Affichages : 134 Taille : 9,7 Ko

Nom : nav2.1.jpg Affichages : 111 Taille : 25,6 Ko


Merci