Prolonger une barre de navigation (subnav)

Version imprimable

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:

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:

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.

20/11/2020, 11h49
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>.

Citation:

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.
23/11/2020, 11h10
HyPs0

2 pièce(s) jointe(s)

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 :
Pièce jointe 584727

- Lors d'un hover sur "collection" par exemple :
Pièce jointe 584728

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

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

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
<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:

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.