2 niveaux de sous menu

**cubita** · 19/11/2015, 14h40

bonjour à tous,

j'ai récuperer le code qui est bien fonctionnel (de Nosmoking) mais j'essaye de faire la même chose mais avec 2 sous menu . après le survol du menu ,cela m'affiche un sous menu, puis survol du sous menu ,m'affiche un autre sous menu (2e niveau)
mais je ne sais pas comment adapter cela au code

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>[CSS3]Transition sur menu</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font:1em/1.5 Verdana, sans-serif;
}
#main {
  width:60em;
  margin:0 auto;
}
h1, h2, h3 {
  color:#069;
}
.menu {
  margin:0;
  padding:0;
  list-style:none;
  background:#cde;
  border:1px solid #48B;
  line-height:2em;
  height:2em;
  width:6em;
}
.menu ul,
.menu li {
  margin:0;
  padding:0;
}
.menu li {
  text-indent:.5em;
  cursor:pointer;
}
.menu li a{
  display:block;
  white-space:nowrap;
  color:#00f;
  text-decoration:none;
}
.menu li ul {
  height:0;
  width:0;
  opacity:0;
 
  position:relative;
  z-index:1000;
 
  margin-left:-1px; /* because bordure */
  overflow:hidden;
  background:#fff;
  border:1px solid #48B;
  box-sizing:border-box;
 
  transition:all 0.5s ease;
}
.menu li:hover ul{
  height:8em;
  width:10em;
  opacity:1;
}
.menu ul li:hover{
  background:#cde;
}
</style>
</head>
<body>
<div id="main">
  <h1>Transition sur menu</h1>
  <div id="bandeau">
    <ul class="menu">
      <li>Le menu
        <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>
    </ul>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio. Etiam non euismod tortor. Phasellus venenatis bibendum lectus, tempor sollicitudin mauris pretium in. Etiam non ex vitae dui fermentum sodales sed id orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin id consectetur enim, et tempor nulla. Pellentesque vitae accumsan nulla, ut blandit nisl. Aliquam justo erat, sollicitudin nec facilisis non, faucibus aliquam ante. Nunc luctus ligula eget justo mattis consequat.
  </p>
</div>
</body>
</html>

Invité · 20/11/2015, 18h07

Bonjour,

change de script :

Galerie CSS - Menus verticaux

**NoSmoking** · 21/11/2015, 17h40

Bonjour,

...j'essaye de faire la même chose mais avec 2 sous menu ...

mauvaise idée, le principe de ce menu pour 1 niveau utilise la propriété overflow, donc si il y a des enfants tu ne les verras pas.

Code :

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

1
2
3
.menu li ul {
  overflow:hidden;
}

Il te faut donc avoir une approche.

**cubita** · 23/11/2015, 16h50

voici ce que j'ai fait ,mais coté css c,est pas encore ça

Code html :

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

1
2
3
4
5
6
7
8
9
  <ul>
                <li><a href='#'>logement</a>	   
                <ul>
				     <li><a href='#'>maisons</a></li>
					 <li><a href='#'>appartements</a></li>
				</ul>
				</li>	
 
   </ul>

en 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
44
45
46
.navigation ul,
.navigation li {
  margin:0;
  padding:0;
  list-style: none;
}
.navigation > li {
	display:inline-block;
}
 
.navigation li a{
  display:block;
  white-space:nowrap;
  color:#00f;
  text-decoration:none;
}
.navigation li ul {
  position: absolute;	
  height:0;
  width:0; 
  left:172px;
  top:-65px;
  opacity:1;
   position:relative;
  z-index:1000;
   margin-left:-1px; /* because bordure */
  overflow:hidden;
  background:#fff;
  border:1px solid #98B;
  box-sizing:border-box;
 
  transition:all 0.5s ease;
}
.navigation li:hover ul{
  height:1.5em;
  width:10em;
  opacity:1;
}
.navigation ul li:hover{
  background:#cde;
}
.navigation li li:hover > ul {
 
	left: 120px;
	top: 0
}

**NoSmoking** · 23/11/2015, 21h11

La seule différence que je vois c'est le nombre d'items du sous menu, 2 au lieu de 4, donc c'est la hauteur de l'UL parent qu'il faut modifier sur le :hover, dans le CSS original, et rien d'autre.

**cubita** · 02/12/2015, 14h19

excusez moi j'ai oublié un niveau

Code html :

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

1
2
3
4
5
6
7
8
9
10
<ul class="navigation">
    <li> <img src="./images/img.gif" />
        <ul>
            <li><a href='#'>logement</a>
                <ul>
                    <li><a href='#'>maisons</a></li>
                    <li><a href='#'>appartements</a></li>
                </ul>
            </li>
        </ul>

**NoSmoking** · 05/12/2015, 22h31

J'espère que ce que tu nous montres est un condensé de ton menu

.

Si cela t’intéresse j'ai "finalisé" un exemple/tuto : Effet sur menu multi-niveaux.

2 niveaux de sous menu

CSS

Discussions similaires

Partager

Partager