Menu Burger qui pousse le contenu plutot qu'il le recouvre

**laclac** · 16/07/2023, 00h33

Bonjour,

J'ai un petit menu urger que j'ai mis en pièce jointe.
Je cherche juste à plutot que le menu apparait au dessus du contenu, j'aimerais qu'il pousse le contenu vers la droite.
Mais je n'y arrive pas du tout .
HTML :

Code html :

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
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Comment faire un menu burger en HTML/CSS ?</title>
  <link rel="stylesheet" href="./style.css">
 
</head>
<body>
<!-- partial:index.partial.html -->
<div id="mySidenav" class="sidenav">
  <a id="closeBtn" href="#" class="close">&times;</a>
  <ul>
    <li><a href="#">A propos</a></li>
    <li><a href="#">Nos services</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
 
<a href="#" id="openBtn">
  <span class="burger-icon">
    <span></span>
    <span></span>
    <span></span>
  </span>
</a>
<!-- partial -->
  <script  src="./script.js"></script>
 
</body>
</html>

CSS :

Code css :

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
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
/* Sidenav menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -250px;
  background-color: #e8e8e8;
  padding-top: 60px;
  transition: left 0.5s ease;
}
 
.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
 
.sidenav a:hover {
  color: #111;
}
 
/* Active class */
.sidenav.active {
  left: 0;
}
 
/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}
 
.burger-icon span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

JS :

Code javascript :

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
var sidenav = document.getElementById("mySidenav");
var openBtn = document.getElementById("openBtn");
var closeBtn = document.getElementById("closeBtn");
 
openBtn.onclick = openNav;
closeBtn.onclick = closeNav;
 
/* Set the width of the side navigation to 250px */
function openNav() {
  sidenav.classList.add("active");
}
 
/* Set the width of the side navigation to 0 */
function closeNav() {
  sidenav.classList.remove("active");
}

Est ce que vous pourriez m'aider ?

Merci d'avance

**NoSmoking** · 19/07/2023, 08h58

Bonjour,
pour commencer il te faut créer un conteneur pour le contenu de ta page, on peut faire par exemple :

Code html :

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
<div id="mySidenav" class="sidenav">
  <a id="closeBtn" href="#" class="close">&times;</a>
  <ul>
    <li><a href="#">A propos</a></li>
    <li><a href="#">Nos services</a></li>
    <li><a href="#">Témoignages</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
 
<a href="#" id="openBtn">
  <span class="burger-icon">
    <span></span>
    <span></span>
    <span></span>
  </span>
</a>
<!-- le contenu de la page -->
<main id="right-side">
  <section>
    <h2>Titre</h2>
    <p>Du contenu</p>
  </section>
</main>

dans l'exemple ci-dessus l'élément <main> est un élément adjacent indirect de ton menu, ils ont même parent mais ne se suivent pas.

Côté CSS, il suffit de lettre une marge à gauche égale à la largeur de ton menu. Cela donne le CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#right-side {
  margin-left: 0;
  transition: .5s;                /* même délai que pour le menu */
}
.sidenav.active ~ #right-side {   /* ciblage avec sélecteur ~ (tilde) */
  margin-left: 250px;             /* largeur du menu */
}

Cela devrait fonctionner sans rien changer d'autre.

**laclac** · 23/07/2023, 23h58

Super merci beaucoup.Ca marche nikkel et je ne connaissais pas du tout cette annotation. J'aurais pu chercher longtemps.
merci encore

Menu Burger qui pousse le contenu plutot qu'il le recouvre

CSS

Discussions similaires

Partager

Partager