Menu horizontal avec 2 sous-menus (vertical ET horizontal)
Bonjour,
Je m'en remets à vous après moultes recherches infructueuses.
Je désire avoir sur mon site d'information un menu ayant n rubriques et 2 sous-menus(ayant x sous-rubriques):
1) l'un vertical en display;none qui disparait une fois la rubrique cliquée ou que la souris n'est plus sur cette rubrique,
2)et l'autre sous-menu qui s'affiche sous le menu principal avec ses sous-rubriques correspondantes et qui reste visible tant que la page est affichée.
Je crois que des exemples valent mieux que tout ce discours.
je cite des exemples sans arrière pensée publicitaire: lepoint.fr (sous-menu horizontal) ou lefigaro.fr (sous-menu et sous/sous-menu horizontaux)et latribune.fr ( sous-menus vertical et horizontal, mon modèle favori) .
voici mes codes à titre d'illustration,( la div sous-menu-horizontal indique l'emplacement du sous-menu horizontal)
Pourriez-vous m'aider à installer ce sous-menu horizontal et à me guider dans mes recherches ?
Merci d'avance pour vos éclaircissements.
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
44
45
46
47
48
49
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title> ---- </title>
<link rel="stylesheet" href="2.css" />
</head>
<body >
<header>
</header>
<nav>
<ul id="menu">
<li><a href="#">Rubrique 1</a>
<ul>
<li><a href="#1.1">Sous rubrique 1.1</a></li>
<li><a href="#1.2">Sous rubrique 1.2</a></li>
</ul>
</li>
<li><a href="#">Rubrique 2</a>
<ul>
<li><a href="#2.1">Sous rubrique 2.1</a></li>
<li><a href="#2.2">Sous rubrique 2.2</a></li>
<li><a href="#2.3">Sous rubrique 2.3</a></li>
</ul>
</li>
<li><a href="#">Rubrique 3</a>
<ul>
<li><a href="#2.1">Sous rubrique 3.1</a></li>
<li><a href="#2.2">Sous rubrique 3.2</a></li>
<li><a href="#2.3">Sous rubrique 3.3</a></li>
<li><a href="#2.4">Sous rubrique 3.4</a></li>
</ul>
</li>
</ul>
</nav>
<content>
<div id="sous-menu-horizontal">
</div>
<section>
</section>
</content>
<footer>
</footer>
</body>
</html> |
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
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
92
93
94
95
96
97
98
99
100
101
102
| body
{
background-color: silver;
}
header, nav, content
{
display: block;
}
header
{
width: 100%;
height: 100px;
background-color: #e2edff;
}
nav
{
width: 100%;
height: 35px;
background-color: lime;
}
/* content
{
} */
#sous-menu-horizontal, section
{
display: inline-block;
}
#sous-menu-horizontal
{
width: 100%;
height: 30px;
background-color: red;
}
section
{
width: 100%;
height: 500px;
margin-top: -5px;
background-color: #e2d8bc;
}
footer
{
width: 100%;
height: 100px;
background-color: #bfcce2;
}
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align: left;
}
#menu li{
display:inline-block;
position:relative;
}
#menu ul li{
display:inherit;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
max-height:0;
width:100%;
overflow:hidden;
transition: .6s all .2s;
}
#menu li:hover ul{
max-height:15em;
}
#menu li{
background: #2d30c6;
}
#menu li li{
background: #2d30c6;
}
#menu li:hover, #menu li li:hover{
background: #e2edff;
}
#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu ul a{
padding:8px 6px;
}
#menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
} |
menu horizontal avec 2 sous-menus ( vertical ET horizontal)
Je ne fait que ça durant 15 jours.
Dans les codes inspectés, on n'a que le script de la page la téléchargée (autrement dit, le script de la rubrique cliquée avec ses sous-rubriques) mais pas celui de toutes les autres sous-rubriques).
C'est pour cela que je pense qu'il faut du php .
Je sais que c'est difficile à expliquer, mais croyez-moi, j'ai essayé une dizaines de sites et toujours la même galère.
[HTML 5] menu horizontal avec 2 sous-menus ( vertical ET horizontal)
@Une.Personne
Prenons le code posté en premier message et ouvrons-le dans un navigateur:
Si je cible la rubrique 1 , une nouvelle page contenant les informations de cette rubrique 1 s'ouvre avec en haut le sous-menu de la rubrique1 disposé horizontalement(sous-rubrique1/sr2/sr3/sr4) dans l'emlpacement rouge de la div "sous-menu-horizontal'.
Il faut essayer de naviguer sur des sites comme lefigaro.fr ou le point.fr pour voir le but.
menu horizontal avec 2 sous-menus ( vertical ET horizontal)
@Une.Personne
Oui.
Je vais remettre mes connaissances en php à jour, et le cas échéant déplacer ce sujet dans le forum correspondant.Mais le sujet reste ouvert pour quelqu'un qui pourrait fournir un script ou un modèle à creuser.
Thanks.
[HTML 5] Menu horizontal avec 2 sous-menus (vertical ET horizontal)
@CandyGirl
C'est l'explication que je cherchais. Merci
