IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu déroulant fluide


Sujet :

CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Juin 2019
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Technicien Help Desk
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juin 2019
    Messages : 10
    Points : 13
    Points
    13
    Par défaut Menu déroulant fluide
    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 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
    <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 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
    #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
    }

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :


    Bonus : Effet sur menu multi-niveaux

  3. #3
    Membre à l'essai
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Juin 2019
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Technicien Help Desk
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juin 2019
    Messages : 10
    Points : 13
    Points
    13
    Par défaut
    Bonjour,

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

    Bon week-end

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. recuperation valeur menu déroulant
    Par jerome1 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 08/06/2005, 12h39
  2. [menu]faire un menu déroulant
    Par Nadine dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 24/03/2005, 09h33
  3. Dimensions d'un Menu déroulant
    Par polo-j dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/02/2005, 15h26
  4. Menu déroulant valeur par défaut
    Par Gourouni dans le forum ASP
    Réponses: 11
    Dernier message: 06/12/2004, 17h31
  5. Menu déroulant suite au passage sur un TMenuItem
    Par James_ dans le forum C++Builder
    Réponses: 2
    Dernier message: 05/05/2004, 15h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo