Volet menu avec burger menu

**d3LTa7** · 08/09/2020, 13h56

Bonjour !

J'ai un souci avec le volet du menu qui apparait avec mon burger menu.... il prends correctement les 90% de l'écran en horizontale mais à du mal a prendre les 100% en verticale, comme vous pouvez le voir sur le code, j’utilise vmax ! Mais je ne pense pas que ça soit la bonne solution !! De plus j'ai l'impression que le volet pour la page vers le bas ce qu'il l'agrandi, même si celui n'est pas visible :/ il doit y avoir un souci niveau display block/none
Merci

Code html :

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

1
2
3
4
5
6
7
8
9
<nav class="main-nav">
                <button aria-expanded="false" aria-controls="main-menu">Menu</button>
                <ul class="menu dropdown-hidden" id="main-menu" hidden>
                   <li class="menu-item active"><a href="#">Accueil</a></li>
           <li class="menu-item"><a href="#">La boutique</a></li>
           <li class="menu-item"><a href="#">Les produits</a></li>
           <li class="menu-item"><a href="#">Actualités</a></li>
           <li class="menu-item"><a href="c#">Nous contacter</a></li>
                </ul><br></nav>

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
.dropdown-hidden{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    bottom: 0;
}
 
.main-nav .menu {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 1rem;
    display: block;
    display: flex;
    padding-left: 15%;
    flex-direction: column;
    align-items: center;
    transform: translateX(-100%);
    transition: .3s;
    list-style: none;
    background-color: #343a40;
    height: 120vmax;
    bottom: 0;
}