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

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.

Note : même réponse que sur Alsacréations

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.

amdawb · 27/02/2013, 00h06

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.

Une.Personne · 27/02/2013, 00h24

Citation:

Envoyé par amdawb

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).

Je ne comprends pas ce que tu veux dire pas 'autres sous-rubriques'

amdawb · 27/02/2013, 01h11

@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.

Une.Personne · 27/02/2013, 01h26

Ok la pièce est tombée j'ai compris

Oui du php me paraît indispensable sauf si tu veux t'amuser avec une base de donnée mais ça ne me semble pas l'idéal.

Personnellement j'aurais envoyé le lien du menu ou tu clique avec un GET pour le faire passer en paramètre, ensuite t'affiche tel ou tel menu suite à ce paramètre à l'aide d'un switch ça me semble plutôt bon.

donc un truc genre :

MENU 1 MENU2 MENU3

selon le paramètre où tu cliques

switch GET_menu

case1 menu1
tu me mets sous_menu1

case menu2
tu me mets sous_menu2

.
.
.

Ouh lala j'espère que j'ai été clair

amdawb · 27/02/2013, 01h42

@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.

rodolphebrd · 27/02/2013, 08h37

Citation:

Envoyé par amdawb

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.

Lorsque vous désactivez Javascript les menus sont fonctionnels.

Php ou pas ces menus sont construits sur une base de html et de css.

Concernant le menu que vous préférez (celui de la tribune) il s'agit de 2 drop-down menu liés et le lien que je vous ai donné remplit son office.

Candygirl · 27/02/2013, 10h41

Bonjour,

Ce que tu souhaites obtenir est assez basique. Il s'agit juste d'un menu déroulant standard, avec, en dessous, sur chacune des pages concernées le sous-menu correspondant.

Je ne comprends pas exactement à quel problème de réalisation tu te heurtes...

Dans ton code exemple il suffirait d'ajouter, pour chaque page, le sous-menu correspondant à la page en cours dans ton sous-menu-horizontal (et le styler selon tes envies):

Code html :

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

1
2
3
4
5
6
<div id="sous-menu-horizontal">
  <ul>
    <li><a href="#1.1">Sous rubrique 1.1</a></li>
    <li><a href="#1.2">Sous rubrique 1.2</a></li>
  </ul>
</div>

amdawb · 27/02/2013, 14h41

@CandyGirl
C'est l'explication que je cherchais. Merci

Une.Personne · 27/02/2013, 18h01

Bonjour

C'est fou, on a les idées plus clairs après une nuit de sommeil.

Bon alors pour aujourd'hui, je vous propose un petit code qui vient d'être fait à l'instant ^^ (soyez indulgents

)

Commençons par en montrer le résultat sur une petite image

et le code si besoin

/ton_répertoire/index.php

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
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Oh mais voici un beau code pour un menu x)</title>
</head>
<body>
<?php
include 'include/menu.inc';
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:10%;top:5%;'>
<tr>
<td><a href='index.php?menu=menu1'>menu1</a><td/>
<td><a href='index.php?menu=menu2'>menu2</a><td/>
<td><a href='index.php?menu=menu3'>menu3</a><td/>
<td><a href='index.php?menu=menu4'>menu4</a><td/>
<td><a href='index.php?menu=menu5'>menu5</a><td/>
</tr>
</table>
<p style='position:absolute;left:20%;font-weight:bold;top:45%'>
<?php
switch ($_GET['ss_menu'])
{
  case 'menu_1_1':
    echo "tu es dans le sous menu1 du menu 1";
    break;
  case 'menu_1_2':
    echo "tu es dans le sous menu1 du menu 2";
    break;
  case 'menu_1_3':
    echo "tu es dans le sous menu1 du menu 3";
    break;
  case 'menu_1_4':
    echo "tu es dans le sous menu1 du menu 4";
    break;
  case 'menu_1_5':
    echo "tu es dans le sous menu1 du menu 5";
    break;
  case 'menu_2_1':
    echo "tu es dans le sous menu 2 du menu 1";
    break;
  case 'menu_2_2':
    echo "tu es dans le sous menu 2 du menu 2";
    break;
  case 'menu_2_3':
    echo "tu es dans le sous menu 2 du menu 3";
    break;
  case 'menu_2_4':
    echo "tu es dans le sous menu 2 du menu 4";
    break;
  case 'menu_2_5':
    echo "tu es dans le sous menu 2 du menu 5";
    break;
  case 'menu_3_1':
    echo "tu es dans le sous menu 3 du menu 1";
    break;
  case 'menu_3_2':
    echo "tu es dans le sous menu 3 du menu 2";
    break;
  case 'menu_3_3':
    echo "tu es dans le sous menu 3 du menu 3";
    break;
  case 'menu_3_4':
    echo "tu es dans le sous menu 3 du menu 4";
    break;
  case 'menu_3_5':
    echo "tu es dans le sous menu 3 du menu 5";
    break;
  case 'menu_4_1':
    echo "tu es dans le sous menu 4 du menu 1";
    break;
  case 'menu_4_2':
    echo "tu es dans le sous menu 4 du menu 2";
    break;
  case 'menu_4_3':
    echo "tu es dans le sous menu 4 du menu 3";
    break;
  case 'menu_4_4':
    echo "tu es dans le sous menu 4 du menu 4";
    break;
  case 'menu_4_5':
    echo "tu es dans le sous menu 4 du menu 5";
    break;
  case 'menu_5_1':
    echo "tu es dans le sous menu 5 du menu 1";
    break;
  case 'menu_5_2':
    echo "tu es dans le sous menu 5 du menu 2";
    break;
  case 'menu_5_3':
    echo "tu es dans le sous menu 5 du menu 3";
    break;
  case 'menu_5_4':
    echo "tu es dans le sous menu 5 du menu 4";
    break;
  case 'menu_5_5':
    echo "tu es dans le sous menu 5 du menu 5e
    ";
    break;
}
?>
</p>
</body>
</html>

/ton_repertoire/include/menu.inc

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
<?php
if($_GET['menu']==menu1)
{
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
<tr>
<td><a href='index.php?menu=menu1&ss_menu=menu_1_1'>premier sous menu1</a><td/>
<td><a href='index.php?menu=menu1&ss_menu=menu_1_2'>deuxième sous menu1</a><td/>
<td><a href='index.php?menu=menu1&ss_menu=menu_1_3'>troisième sous menu1</a><td/>
<td><a href='index.php?menu=menu1&ss_menu=menu_1_4'>quatrième sous menu1</a><td/>
<td><a href='index.php?menu=menu1&ss_menu=menu_1_5'>cinquième sous menu1</a><td/>
</tr>
</table>
<?php
}
if($_GET['menu']==menu2)
{
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
<tr>
<td><a href='index.php?menu=menu2&ss_menu=menu_2_1'>premier sous menu2</a><td/>
<td><a href='index.php?menu=menu2&ss_menu=menu_2_2'>deuxième sous menu2</a><td/>
<td><a href='index.php?menu=menu2&ss_menu=menu_2_3'>troisième sous menu2</a><td/>
<td><a href='index.php?menu=menu2&ss_menu=menu_2_4'>quatrième sous menu2</a><td/>
<td><a href='index.php?menu=menu2&ss_menu=menu_2_5'>cinquième sous menu2</a><td/>
</tr>
</table>
<?php
}
if($_GET['menu']==menu3)
{
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
<tr>
<td><a href='index.php?menu=menu3&ss_menu=menu_3_1'>premier sous menu3</a><td/>
<td><a href='index.php?menu=menu3&ss_menu=menu_3_2'>deuxième sous menu3</a><td/>
<td><a href='index.php?menu=menu3&ss_menu=menu_3_3'>troisième sous menu3</a><td/>
<td><a href='index.php?menu=menu3&ss_menu=menu_3_4'>quatrième sous menu3</a><td/>
<td><a href='index.php?menu=menu3&ss_menu=menu_3_5'>cinquième sous menu3</a><td/>
</tr>
</table>
<?php
}
if($_GET['menu']==menu4)
{
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
<tr>
<td><a href='index.php?menu=menu4&ss_menu=menu_4_1'>premier sous menu4</a><td/>
<td><a href='index.php?menu=menu4&ss_menu=menu_4_2'>deuxième sous menu4</a><td/>
<td><a href='index.php?menu=menu4&ss_menu=menu_4_3'>troisième sous menu4</a><td/>
<td><a href='index.php?menu=menu4&ss_menu=menu_4_4'>quatrième sous menu4</a><td/>
<td><a href='index.php?menu=menu4&ss_menu=menu_4_5'>cinquième sous menu4</a><td/>
</tr>
</table>
<?php
}
if($_GET['menu']==menu5)
{
?>
<table style='position:absolute;width:50%;left:25%;border:solid black;height:8%;top:18%'>
<tr>
<td><a href='index.php?menu=menu5&ss_menu=menu_5_1'>premier sous menu5</a><td/>
<td><a href='index.php?menu=menu5&ss_menu=menu_5_2'>deuxième sous menu5</a><td/>
<td><a href='index.php?menu=menu5&ss_menu=menu_5_3'>troisième sous menu5</a><td/>
<td><a href='index.php?menu=menu5&ss_menu=menu_5_4'>quatrième sous menu5</a><td/>
<td><a href='index.php?menu=menu5&ss_menu=menu_5_5'>cinquième sous menu5</a><td/>
</tr>
</table>
<?php
}
?>

Bien à vous

27/02/2013, 00h06	#9
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	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.
	00

27/02/2013, 01h11	#11
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	[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.
	00

27/02/2013, 01h42	#13
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	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.
	00

27/02/2013, 14h41	#16
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	[HTML 5] Menu horizontal avec 2 sous-menus (vertical ET horizontal) @CandyGirl C'est l'explication que je cherchais. Merci
	00

26/02/2013, 21h25	#2
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 602 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 602 Points : 923 Points : 923	bonsoir, Après lecture de vos exemples je ne vois pas ce que vous entendez par sous-menu horizontal. Un screen peut-être. Note : même réponse que sur Alsacréations
	00

26/02/2013, 21h57	#3
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	@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.
	00

26/02/2013, 22h59	#4
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 602 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 602 Points : 923 Points : 923	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.
	00

26/02/2013, 23h25	#6
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	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.
	00

26/02/2013, 23h27	#7
amdawb Invité de passage amandine weber Webmaster Inscription : août 2012 Messages : 8 Détails du profil Informations personnelles : Nom : amandine weber Localisation : Maroc Informations professionnelles : Activité : Webmaster Secteur : Conseil Informations forums : Inscription : août 2012 Messages : 8 Points : 2 Points : 2	@UNE.persnne merci je teste les codes et je vous réponds.
	00

26/02/2013, 23h35	#8
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 602 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 602 Points : 923 Points : 923	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.
	00

27/02/2013, 01h26	#12
Une.Personne Futur Membre du Club Étudiant Inscription : février 2013 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2013 Messages : 15 Points : 19 Points : 19	Ok la pièce est tombée j'ai compris Oui du php me paraît indispensable sauf si tu veux t'amuser avec une base de donnée mais ça ne me semble pas l'idéal. Personnellement j'aurais envoyé le lien du menu ou tu clique avec un GET pour le faire passer en paramètre, ensuite t'affiche tel ou tel menu suite à ce paramètre à l'aide d'un switch ça me semble plutôt bon. donc un truc genre : MENU 1 MENU2 MENU3 selon le paramètre où tu cliques switch GET_menu case1 menu1 tu me mets sous_menu1 case menu2 tu me mets sous_menu2 . . . Ouh lala j'espère que j'ai été clair
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email