Discussion :

[labarre2002]

Bonsoir

Je realise le menu de ce site :

https://contrabureau.com/



le soucis est que lorsque j essaie d animer la ligne en dessous de chaque lien il ne se passe rien

mon code 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
  <nav>
            <ul>
 
             <li class="first visible"> 
                <div style=" background-image: url('assets/burger.jpg');"></div>
                 <span>01</span> 
                 <a href="#"> <h1>burger</h1></a> 
                </li>
             <li class="two  visible">
                <div style=" background-image: url('assets/sandwich.jpg');"></div>
                <span>02</span> 
                <a href="#"><h1>sandwich</h1></a>
             </li>
             <li class="three  visible">
                <div style=" background-image: url('assets/salade.jpg');"></div>
                <span>03</span>
                 <a href="#"><h1>salade</h1></a>  
                </li>
             <li class="four visible ">
                <div style=" background-image: url('assets/drink.jpg');"></div>
                <span>04</span> 
                <a href="#"><h1>boissons</h1></a> 
            </li>
             <li class="five  visible">
                <div style=" background-image: url('assets/pasta.jpg');"></div>
                <span>05</span>
                 <a href="#"><h1>pates</h1></a>  
                </li>
 
           </ul>
 
</nav>

mon code 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
li{
    width: 100vw;
    height:15vw;
    display:flex;
    align-items: flex-start;
    padding-left: 95px;
    position: relative;
    overflow: hidden;
}
 
li:before{
 
    content: "";
    position: absolute;
    height: .2vw;
    background-color: #c92d1f;
    left: 0;
    width: 100%;
    bottom: 0;
    transform: scaleX(0);
    transition: transform 1s ease-out;
    transform-origin: left;
}
 
.visible:before{
    transform: scaleX(1);
}

en espérant avoir une réponse constructive.
Merci.