Bouton dynamique dans la barre de navigation

Version imprimable

4 pièce(s) jointe(s)

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

Pièce jointe 596348

Pièce jointe 596350

Et donc son code dans le header.php

Code:

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:

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 :

Pièce jointe 596353

Pièce jointe 596354

Merci :)

22/04/2021, 16h42
AMP29

Bonjour,
Peut-être y arriveriez-vous avec un "display: inline-block" dans le style.

Je vais partager la partie CSS au cas ou mais je pense que la solution doit être du coté WP et pas du côté CSS

Code:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.main-nav button {
    position: fixed;
    top: 1%;
    left: 0;
    font: 0/0 a;
    color: transparent;
    border: 0;
    text-shadow: none;
    width: 4rem;
    height: 2.4rem;
    padding: 1rem 0;
    background-color: #fff;
    background-clip: content-box;
    transition: .3s;
}
.main-nav button::before,
.main-nav button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.4rem;
    background-color: #fff;
    transition: .3s;
    transform-origin: left;
}
.main-nav button::before {
    top: 0;
}
.main-nav button::after {
    bottom: 0;
}
.main-nav button[aria-expanded=true] {
    background-color: rgba(255, 255, 255, 0);
}
.main-nav button[aria-expanded=true]::before {
    transform: translate(.5rem, -.375rem) rotate(45deg);
}
 
.main-nav button[aria-expanded=true]::after {
    transform: translate(.5rem, .375rem) rotate(-45deg);
}
.main-nav .menu{
    position: fixed;
    z-index: 100;
    left: 0;
    top: 5%;
    display: block;
    display: flex;
    flex-direction: row;
    background-color: var(--primary);
    transform: translateX(-100%);
    transition: .3s;
}
.main-nav .menu:not([hidden]) {
    transform: translateX(0)
}
.main-nav a {
    display: block;
    padding: 1rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}
 
.main-menu a{
    text-decoration: none;
    color: #020504;
    margin: 0.5rem;
    padding: 0.5rem;
}
.main-nav{
    display: flex;
    flex-direction: row;
    background-color: var(--primary);
}