Création d'une barre de navigation à 2 niveaux

-6

Je souhaite créer une navigation à 2 niveaux avec effet de retard en survol.Création d'une barre de navigation à 2 niveaux

dans css Où placer transition?

ici est le fragment de code:

@import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext'); 
 
body { 
 
    background: #ADAEAE; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-family: 'Quicksand'; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    background: #222122; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
} 
 

 
nav ul a { 
 
    display: inline-block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
nav ul a:hover { 
 
    background-color: #404040; 
 
    transition: all 1s; 
 
} 
 

 
nav ul ul li { 
 
    display: block; 
 
} 
 

 
nav li ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #222122; 
 
} 
 

 
nav li:hover ul { 
 
    display: block; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Dokument bez tytułu</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">About</a> 
 

 
     <ul> 
 
      <li><a href="#">About2</a></li> 
 
      <li><a href="#">About3</a></li> 
 
      <li><a href="#">About4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Offer</a> 
 
     <ul> 
 
      <li><a href="#">Offer2</a></li> 
 
      <li><a href="#">Offer3</a></li> 
 
      <li><a href="#">Offer4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

Source

2017-08-12 Pan Cogito

s'il vous plaît ajouter quelques images de ce que vous voulez et inclure le code que vous avez déjà –

OK, mon appologise est le premier poste sur stackoverflow. –

ok, alors qu'est-ce que vous voulez retard? –

mis z-index:1;background: #222122; sur nav ul a{} pour élever le lien et masquer le menu caché sous
à nav li ul{} supprimer display: none; et aligner les fonds par bottom:0; et h ide sous l'élément avec z-index:-1;
enfin nav li:hover ul{} ont bouger vers le bas avec bottom:-300%; et ajoutez l'animation ici, vous obtenez un effet de diapositive avec transition: bottom .2s; et la facilité en fait ressembler à elle frappe quelque chose sur le fond

Note: en bas: -300% parce qu'il y a 3 articles.

Note: transition est place sous l'étiquette :hover de sorte qu'il disparaît lorsque vous quittez avec votre curseur, déplacez-le nav li ul pour le faire glisser en arrière jusqu'à

vous pouvez tester dans cet extrait, si tel est bien ce que vous voulait.

@import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext'); 
 
body { 
 
    background: #ADAEAE; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-family: 'Quicksand'; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    background: #222122; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
} 
 

 
nav ul a { 
 
    display: inline-block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
    z-index:1; 
 
    background: #222122; 
 
} 
 

 
nav ul a:hover { 
 
    background-color: #404040; 
 
    transition: all 1s; 
 
} 
 

 
nav ul ul li { 
 
    display: block; 
 
} 
 

 
nav li ul { 
 
    bottom:0; 
 
    
 
    position: absolute; 
 
    background: #222122; 
 
    z-index:-1; 
 
} 
 

 
nav li:hover ul { 
 
    bottom: -300%; 
 
    display: block; 
 
    transition: bottom .2s ease-in; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">About</a> 
 

 
     <ul> 
 
      <li><a href="#">About2</a></li> 
 
      <li><a href="#">About3</a></li> 
 
      <li><a href="#">About4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Offer</a> 
 
     <ul> 
 
      <li><a href="#">Offer2</a></li> 
 
      <li><a href="#">Offer3</a></li> 
 
      <li><a href="#">Offer4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav>

Source

2017-08-12 11:27:02

Création d'une barre de navigation à 2 niveaux

Répondre

Questions connexes