Menu déroulant fluide

Version imprimable

Bonsoir,

J'aimerais savoir comment faire pour ajouter de la fluidité à mon menu déroulant. J'ai essayé d'utiliser max-height ainsi qu'une transition mais je n'obtiens pas le résultat souhaité.

Quelqu'un pourrait il me dire comment je dois m'y prendre?

Merci beaucoup

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="menuderoulant.css" type="text/css" />
    <title>Menu Deroulant</title>
</head>
 
<body>
    <nav id="menu">
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Présentation</a>
                <ul>
                    <li><a href="#">Sous-Menu 1</a></li>
                    <li><a href="#">Sous-Menu 2</a></li>
                    <li><a href="#">Sous-Menu 3</a></li>
                    <li><a href="#">Sous-Menu 4</a></li>
                </ul>
            </li>
            <li><a href="#">Références</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

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
#menu ul {
    margin: 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
	border-radius: 0 0 8px 8px;
}
 
 
#menu li {
    float: left;
    display: inline-block;
    width: 25%;
}
 
#menu li a {
    text-decoration: none;
    color: white;
    background: #3B4E77;
    display: block;
    border-radius: 10px;
    padding: 6px;
}
 
#menu ul ul li {
    display: none;
}
 
#menu ul li:hover ul li {
    display: block;
    width: 100%;
    margin-top: 1px;
    -webkit-transition: all 1s;
    transition: all 1s;     
}
 
#menu li a:hover {
    background-color: #cc0
}
 
#menu li a:active {
    background-color: #5F879D
}

Bonjour,
il est préférable de déclarer dans la partie « au repos » les propriétés de départ de tes éléments, ainsi tu aurais pour commencer
Code:

1 2 3 4 5 6 7 8 9 #menu ul ul li { display: none; width: 100%; margin-top: 1px; transition: all 1s; } #menu ul li:hover ul li { display: block; }
pour qu'il y ait transition il faut qu'il y ait une valeur de départ et un valeur d'arrivée que l'on puisse graduellement faire évoluer, exemple de 1 à 20, mais un display de none à block se fera d'un seul coup.

Pour en revenir à ton choix sur max-height, qui un choix judicieux, il te faut initialiser les propriétés comme suit
Code:

1 2 3 4 5 6 7 8 9 10 #menu ul ul li { width: 100%; margin-top: 1px; transition: all 1s; max-height:0; overflow: hidden; /* pour ne pas voir */ } #menu ul li:hover ul li { max-height: 10em; /* par exemple */ }
Il te faut simplement ajuster la valeur de max-height pour quelle ne soit pas contraignante.

En modifiant la structure de ton CSS, tu pourrais également agir directement non pas sur les <li> mais sur l'<ul> ce qui me semble préférable :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #menu ul ul li { width: 100%; margin-top: 1px; } #menu ul ul { max-height: 0; overflow: hidden; transition: all 1s; } #menu ul li:hover ul { max-height: 10em; }
De cette sorte tu pourrais même jouer sur la scaleY ce qui supprimerait la contrainte de hauteur :
Code:

1 2 3 4 5 6 7 8 9 10 11 #menu ul ul li { width: 100%; margin-top: 1px; } #menu ul ul { transition: all 1s; transform: scaleY(0); } #menu ul li:hover ul { transform: scaleY(1); }
Ressources :
↪
CSS Transitions
CSS Transforms

Bonus : Effet sur menu multi-niveaux

13/10/2019, 10h24
Chrisquicks

Bonjour,

Merci beaucoup pour cette explication détaillée....je commence à comprendre le principe 8-)

Bon week-end

(problème résolu, je cloture le post)