Discussion :

[HyPs0]

Bonjour je suis en train de faire une navbar pour un projet et j'aimerais pouvoir afficher une subnav lors d'un hover sur mes liens. Je voudrais que la subnav prenne toute la longueur de l'écran. Est-ce que vous avez une idée de la manière de faire ?

Mon 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
<nav class="main-nav">
        <ul class="nav-ul">
            <div class="bloc-list">
                <li>
                    <a href="#" class="link">Collections</a>
                    <div class="subnav-content">
                        <a href="">test1</a>
                        <a href="">test2</a>
                        <a href="">test3</a>
                        <a href="">test4</a>
                        <a href="">test5</a>
                        <a href="">test6</a>
                    </div>
                </li>
                <li><a href="#" class="link">Vaisselle</a></li>
                <li><a href="#" class="link">Inspiration</a></li>
            </div>  
            <li><img src="public/images/logo_vaisselle_arthur.svg" alt="Vaisselle-logo"></li>
            <div class="bloc-icon">
                <li><img src="public/images/loupe.png" alt="loupe" class="icon"></li>
                <li><img src="public/images/user.png" alt="user" class="icon"></li>
                <li><img src="public/images/heart.png" alt="heart" class="icon"></li>
                <li><img src="public/images/cart.png" alt="cart" class="icon"></li>
            </div>
        </ul>
    </nav>

MON 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
54
.link{
    text-decoration: none;
    color: black;
}
 
.icon{
    width: 40px;
}
 
.link:hover{
    animation: underline 0.5s linear;
    animation-fill-mode: forwards;
}
 
 
.main-nav{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0px 10px 5px 0px #D4D3D8;
}
 
.nav-ul{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
 
.bloc-list{
    display: flex;
    width: 500px;
    justify-content: space-around;
}
 
.bloc-icon{
    display: flex;
    width: 500px;
    justify-content: space-around;
}
 
@keyframes underline{
    0%{
        border-bottom: solid rgba(0, 0, 0, 0) 1.5px;
    }
    50%{
        border-bottom: solid rgba(0, 0, 0, 0.5) 1.5px;
    }
    100%{
        border-bottom: solid rgba(0, 0, 0, 1) 1.5px;
    }
}

Merci de votre aide.

[NoSmoking]

Bonjour,
pour commencer ton code HTML n'est pas conforme, même si cela ne l'empêchera pas de fonctionner, un élément <div> ne peut pas être enfant direct d'un élément <ul>.

Je voudrais que la subnav prenne toute la longueur de l'écran.

cela revient quoiqu'il arrive à tracer une ligne horizontale, dans ce cas mets l'apparition sur le hover du menu et non pas du lien. Je pense qu'avec la structure alambiquée que tu as tu rencontreras quand même des soucis.

Je ne vois pas trop le rendu que tu cherches à obtenir.

[HyPs0]

Merci de ta réponse. Je vais modifier mon code pour le rendre plus conforme. Pour ce qui est du rendu voici ce que je compte faire :

- La barre de navigation :


- Lors d'un hover sur "collection" par exemple :


J'espère que tu comprends mieux merci de ta réponse.

[HyPs0]

J'ai donc modifié le html et le css en espérant que ce soit plus conforme et lisible.

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
<nav class="navbar">
    <div class="subnav">
        <button class="subnavbtn">Collection</button>
        <div class="subnav-content">
            <a href="">test 1</a>
            <a href="">test 2</a>
            <a href="">test 3</a>
            <a href="">test 4</a>
        </div>
        <div class="subnav">
            <button class="subnavbtn">Vaisselle</button>
        </div>
        <div class="subnav">
            <button class="subnavbtn">Inspiration</button>
        </div>
    </div>
    <img src="./public/images/logo_vaisselle_arthur.svg" alt="logo_vaisselle_arthur">
    <div class="bloc-icon">
        <img src="public/images/loupe.png" alt="loupe" class="icon">
        <img src="public/images/user.png" alt="user" class="icon">
        <img src="public/images/heart.png" alt="heart" class="icon">
        <img src="public/images/cart.png" alt="cart" class="icon">
    </div>
</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
.navbar{
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px 10px 5px 0px #D4D3D8;
    width: 100%;
    height: 80px;
    box-shadow: 0px 10px 5px 0px #D4D3D8;
}
 
.subnav{
    display: flex;
}
 
.icon{
    width: 40px;
}

Si jamais le code ne convient toujours pas n'hésite pas à me le signaler. Encore merci pour ton aide.