Menu verticale avec CSS3 avec survole de la souris

**DevProg14** · 20/10/2016, 15h57

Bonjour,

Je suis entrain de faire un menu verticale en CSS3 en utilisant HTLM5.
Je voudrais lors sur du survole de la souris sur le Menu , que la liste des items du menu soit affichée, et puis lorsque la souris n'est plus sur le Menu, il y a disparition de la liste des items. Tout en gardant à l'idée l'utilisation du clavier.
J'ai essayé d'utilisé display avec la valeur none et la valeur block mais impossible à faire fonctionner.

Je voudrais savoir si vous pouvez m'éclairer sur ce point afin que je puisse savoir d'où peut venir mon erreur?

Je vous met le code htlm:

Code :

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
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>Objectif Formation</title>
    </head>
 
    <body>
		<!-- Header -->
		<header id="header">
			<h1><a href="#">Objectif formation</a></h1>
 
			<nav class="nav">
				<ul>
					<li><a class="active" href="#menu">Menu</a></li>
					<li><a class="content" href="#contact" >Contact</a></li>
					<li><a class="content" href="#formulaire" >Formulaire</a></li>
				</ul>
			</nav>
		</header>
 
    </body>
</html>

Je vous met aussi le code css:

Code :

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
 
/*navigation principal*/
#header .nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
 
}
 
/*ligne de séparation dans la liste du menu*/
#header .nav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: solid 1px rgba(160, 160, 160, 0.3);
}
 
/*element de la liste du menu: disparition : dois etre utilisable avec clavier */
/*#header .nav li a.content {
    display:none;
}*/
 
/* survole de la souris sur la liste: décalage, effet de mouvement*/
#header .nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
    padding-left: 30px; /* décalage du contenu vers la droite */
 
}
 
/*couleur de l'item Menu*/
#header .nav li a.active {
    background-color: #4CAF50;
    color: white;
}
 
/*survole de la souris sur l'item Menu*/
#header .nav li a.active:hover {
    background-color: #0080ff;
}

Merci de votre compréhension.
Cordialement.

**Ecared** · 21/10/2016, 10h04

Salut,

En très résumé tu peux faire quelque chose comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<nav class="nav">
	<a href="#">Menu</a>
	<div class="menu-hover">
		<a class="content" href="#contact">Contact</a>
		<a class="content" href="#formulaire" >Formulaire</a>
	</div>
</nav>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.nav:hover .menu-hover{display:block;}
 
.menu-hover{display:none;}

Invité · 21/10/2016, 11h41

Bonjour, et bienvenu sur DVP.

Un menu déroulant en CSS3
Un menu multi-niveaux, avec jQuery : https://codepen.io/jreaux62/pen/dPxKKQ

Pour info (@Ecared), un menu de navigation HTML5 aura généralement la structure :

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
<nav>
  <ul>
    <li>
      <a href="...">...</a>
        <ul>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
        </ul>
    </li>
    <li>
      <a href="...">...</a>
        <ul>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
        </ul>
    </li>
  </ul>
</nav>

Pour affichage/masquable sur :hover :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
nav ul li ul {display:none;}
nav ul li:hover > ul {display:block;}

**DevProg14** · 22/10/2016, 22h10

Bonjour,

Merci pour votre réponse à vous deux.
Les deux réponses permettent de résoudre mon problème.
J'ai une préférence pour la réponse de jreaux62, car elle permet de garder la structure du menu HTML5.
J'ai cependant une autre question toujours relative au menu, est ce que le hover est utilisable sur tablette et sur téléphone?
Car je pense qu'il y a un problème de portabilité et de plus le hover n'est pas utilisable avec le clavier en utilisant la tabulation.
Est-il préférable d'utiliser un bouton plutôt qu'un hover?

Cordialement.

Menu verticale avec CSS3 avec survole de la souris

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager