Menu horizontal avec 2 sous-menus (vertical ET horizontal)

**amdawb** · 26/02/2013, 20h19

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 :

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
<!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 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
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;
}

**rodolphebrd** · 26/02/2013, 21h25

bonsoir,

Après lecture de vos exemples je ne vois pas ce que vous entendez par sous-menu horizontal.

Un screen peut-être.

**amdawb** · 26/02/2013, 21h57

@rodolphebrd
mon cher, comprenez mon désarroi pour avoir posté ici et ailleurs, car je bloque vraiement depuis une quinzaine.
Qu'entendez-vous par screen? Il me semble qu'il suffit de naviguer sur latribune.fr pour comprendre ce que je cherche : un sous-menu horizontal qui reste affichée avec ses sous-rubriques , incitant le visiteur à exlporer davantage le site, et d'une autre maniçre montrer la richesse du contenu du site.

**rodolphebrd** · 26/02/2013, 22h59

Il n'y a aucun mal à multiplier les posts sur les forums

Je veux bien vous aider mais avant de chercher (car ça peut prendre du temps) je veux être sûr de bien comprendre.

Et par screen j'entends une copie d'écran de la zone concernée.

**Une.Personne** · 26/02/2013, 23h25

Bonsoir,

Voici un vieux code qui devrait correspondre, par contre je ne saurais plus dire les éventuelles sources.

Bien à vous !

le css :

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
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
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : red; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 110px; /* largeur */
}
 
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à* droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à* droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 110px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* à?léments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 110px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à* gauche pour ne pas coller ... */      
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: red; /* On passe le texte en rouge... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li { /* tous les items de liste */
	float: left;
	width: 8em; /* largeur obligatoire, sinon opera devient fou */
}
 
#menu li ul { /* listes de deuxième niveau */
	position: absolute;
	background: red	;
	width: 10em;
	left: -999em; /* on met left plutàŽt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}
 
#menu li ul ul { /* listes de troisième niveau et plus */
	margin: -1em 0 0 9em;
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}

le js :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Html :

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
<img style='position:absolute;top:1px;left:50%;margin-left:-400px;'src='pic/banderole.png'alt='banderole'/>
    <ul style='position:absolute;top:110px;left:50%;margin-left:-250px;width:510px'id="menu">
        <li>
                <a href="index.php">Accueil</a>
        </li>        
       <li>
                <a href="personnel.php">Personnels</a>
                <ul>
                        <li>
                                <a href="#">Départements</a>
                                <ul style='position:absolute;top:10px;'id='menu'>
                                        <li><a href="personnel_radiologie.php">Radiologie</a></li>
                                        <li><a href="personnel_ophtalmologie.php">Ophtalmologie</a></li>
                                        <li><a href="personnel_urologie.php">Urologie</a></li>
                                        <li><a href="personnel_dermatologie.php">Dermatologie</a></li>
                                </ul>
                        </li>
                        <li>
                                <a href="personnel_administration.php">Administration</a>
                        </li>
						<li>
                                <a href="personnel_interimaire.php">Interimaires</a>
                        </li>
                </ul>
        </li>       
        <li>
                <a href="agenda.php">Agenda</a>
                <ul>
                        <li>
                                <a href="#">Départements</a>
                                <ul style='position:absolute;top:10px;'id='menu'>
                                     <li><a href="agenda_radiologie.php">Radiologie</a></li>
                                     <li><a href="agenda_ophtalmologie.php">Ophtalmologie</a></li>
                                     <li><a href="agenda_urologie.php">Urologie</a></li>
                                     <li><a href="agenda_dermatologie.php">Dermatologie</a></li> 
                                </ul>
                        </li>
                        <li>
                                <a href="agenda_administration">Administration</a>
                        </li>
                </ul>
        </li>
        <li>
                <a href="salle.php">Salle</a>
                <ul>
                        <li><a href="salle_examen.php">Examen</a></li>
                        <li><a href="salle_chambre.php">Chambres</a></li>
                </ul>
        </li>        
        <li>
                <a href="plus.php">plus</a>
                <ul>
                         <li>
                                <a href="plus_informer.php">Rester informé</a>
                                <ul style='position:absolute;top:10px;'id='menu'>
                                        <li><a href="http://google.be">Radiologie</a></li>
                                        <li><a href="http://google.be">Ophtalmologie</a></li>
                                        <li><a href="http://google.be">Urologie</a></li>
                                        <li><a href="http://google.be">Dermatologie</a></li>
                                </ul>
                        </li>
                        <li><a href="http://google.be">Google</a></li>
                </ul>
        </li>        
	</ul>

EDIT : Avec le bout de code js, il devrait être compatible tous navigateurs.

**amdawb** · 26/02/2013, 23h25

Non ce n'est pas de screen dont il s'agit.
Malgré les codes très simplistes que j'ai posté, le but est de faire un site web d'information technique qui exige un menu avec 8 à 9 rubriques, chacune ayant 6 à 7 sous-rubriques. Et comme les meilleurs sites d'information( genre lefigaro, lepoint...), le but est que le client ait toujours sous les yeux la diversité et la profondeur du contenu, ce qui l'incitera à explorer davantage le site, contrairement à un sous-menu qui disparait un fois la souris n'est plus sur la rubrique.

**amdawb** · 26/02/2013, 23h27

@UNE.persnne

merci
je teste les codes et je vous réponds.

**rodolphebrd** · 26/02/2013, 23h35

En fait ce n'est pas trop compliqué à mettre en place et presque aussi simple qu'un menu déroulant.

Inspectez le code et vous en verrez les coulisses.

Menu horizontal avec 2 sous-menus (vertical ET horizontal) [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager