Menu de navigation

**demu73** · 03/10/2012, 16h32

Bonjour

J'ai un souci avec mon menu de navigation. J'ai lu attentivement le tuto de cette page mais malheureusement, avec les terme anglais, je comprend pas bien le script proposer en exemple. Aussi, je n'est pas trouvé une solution à un problème de longueur.

Je commence par le premier celui du menu déroulant à plusieurs niveaux. J'aimerais avoir le même résultat que celui du tuto. Et j'ai pas trouvé le code exact pour avoir la même chose. Je vous met mes codes HTML et CSS.

le HTML :

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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styles.css" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">
 
	header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { 	
    display: block;
}
     </style>
		<![endif]-->
		<title>index</title>
    </head>
    <body>
 
	<ul id="menuDeroulant">
		<li>
		    <a href="index.php">Accueil</a>
		    <ul class="sousMenu">
		        <li><a href="contact.html">Contact</a></li>
			</ul>
			</li>		
		</li>
 
		<li>
			<a href="trains.html">Les trains</a>
			<ul class="sousMenu">
				<li><a href="cff.php">CFF</a></li>
				<ul>
				    <li><a href="re460.php">Re 460</a></li>
				    <li><a href="re44ii.php">Re 4/4 II</a></li>
				</ul>
				<li><a href="bls.php">BLS</a></li>
				<li><a href="mo.php">MO</a></li>
				<li><a href="tpf.php">TPF</a></li>
		        <li><a href="mc.php">MC</a></li>
			</ul> 
			</li> 
		<li>
			<a href="bus.html">les bus</a>
			<ul class="sousMenu">			      
				<li><a href="bernmobil.html">Bernmobil</a></li>
			    <li><a href="tl.html">TL</a></li>
			</ul>
		    </li>
		<li>
			<a href="infra.html">Infrastructure</a>
			<ul class="sousMenu">			      
				<li><a href="infra.html">En construction</a></li>
			</ul>
		    </li>
	    <li>
		    <a href="photo.html">Photos</a>
			</ul>
			</li>	
	</ul>
	</li>
 
 
	</body>
</html>

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
html, body 
{
  font: 11px verdana, sans serif;
  background: transparent url("http:www.triebzug.ch/divers(logobilde.jpg") top center no-repeat;
  margin:0;
  padding:0;
  height:100%; 
}
 
html>body #wrap {height:100%;} 
 
#header 
{
   width:100%;
   height:5em;
}
 
html>body #header 
{
  position:fixed;
  z-index:10; 
}
 
html>body #content-wrap {height:100%;} 
 
html>body #content {padding:6em 1em;} 
 
 
#menuDeroulant
{
   width : 644px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
   position: absolute;
   top: 0;
   left: 0;   
}
#menuDeroulant li
 {
    float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant  .sousMenu
{
    display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuderoulant .sousMenu li
{
    float: none; 
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent; 
	border-right: 1px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
   display: block;
   height: 1%;
   color: #090800;
   background: #EBDE13;
   margin: 0;
   padding: 4px 8px;
   border-right: 1px solid #090800;
   text-decoration: none;
 }
 #menuDeroulant li a:hover { background-color: #FCBF49; }
 #menuDeroulant li a:active { background-color: #EBDE13; }
 
 #menuDeroulant .sousMenu li a:link,
 #menuderoulant .sousMenu li a:visited
 {
    display: block;
	color: #090800;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("http://www.triebzug.ch/divers/logobilde.jpg");
}
#menuDeroulant .sousMenu li a:hover
{
   background-image: none;
   background-color: #FCBF49;
 }
 
 
div#article
{
    margin-left: auto;
	margin-right: auto;
	width: 50em;
    text-align: left;
}
body#footer 
{
   width:100%;
   height:5em;
}
 
html>body #footer 
{
  position:fixed;
  bottom:0;
  z-index:10; 
}

Mon deuxième soucis concerne la longeur de barre de menu, pour bien comprendre voir la pièce attachée (version miniature). Je souhaite que l'onglet "photos" soit à coté de l'onglet "infrastructure". Je cherche le code à modifier pour augmenter le nombre d'onglet au menu de navigation.

En vous remerciant d'avance pour votre aide.

**FirePrawn** · 03/10/2012, 16h47

Bonjour,

Tu as déjà un gros souci sémantique.
Un <ul> ne peut contenir que des <li>.
Refais une passe sur ton code HTML et vérifie tes balises.
Par exemple ici :

Code :

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

1
2
3
4
5
6
<ul class="sousMenu">
				<li><a href="cff.php">CFF</a></li>
				<ul>
				    <li><a href="re460.php">Re 460</a></li>
				    <li><a href="re44ii.php">Re 4/4 II</a></li>
				</ul>

Tu as un <ul> dans un <ul>. Tu ne dois pas fermer ton premier <li>

**demu73** · 03/10/2012, 21h07

J'ai un peu regarder de plus près pour les <ul> et <li>. J'ai fait une petite modification en rajoutant une class pour le niveau inférieur, ce qui donne ceci :

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
<li>
			<a href="trains.html">Les trains</a>
			<ul class="sousMenu">
			<li>
				<a href="cff.php">CFF</a> 
   				    <ul class="choix">
					<li>
					    <li><a href="re460.php">Re 460</a></li>
				        <li><a href="re44ii.php">Re 4/4 II</a></li>
				    </ul>
					</li>
				<li><a href="bls.php">BLS</a></li>
				<li><a href="mo.php">MO</a></li>
				<li><a href="tpf.php">TPF</a></li>
		        <li><a href="mc.php">MC</a></li>
			</ul> 
			</li> 
		<li>

J'ai rajouter la même class au CSS en reprennant les même codes que la class sousMenu. L'inconvégniant, le menu choix se glisse dessous et pas à coté du sousmenu.

Je met le code CSS sur le menu choix :

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
#menuDeroulant li:hover > .choix  { display: block; }
#menuDeroulant  .choix 
{
    display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuderoulant .choix  li
{
    float: none; 
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent; 
	border-right: 1px solid transparent;
}
#menuDeroulant .choix  li a:link,
 #menuderoulant .choix  li a:visited
 {
    display: block;
	color: #090800;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("http://www.triebzug.ch/divers/logobilde.jpg");
}
#menuDeroulant .choix  li a:hover
{
   background-image: none;
   background-color: #FCBF49;
}

Mon souhait que le menu choix va sur le coté droite (un peu comme les menus de certains programme). Pouvez-vous me signaler le code à modifier pour avoir ce souhait, s'il vous plait.

**FirePrawn** · 04/10/2012, 11h38

Il faut jouer avec la position de ton menu.
Avec par exemple :

Code :

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

1
2
position: relative;
left: 50px;

Sachant que la valeur que je mets est totalement prise au hasard.

**demu73** · 04/10/2012, 22h33

J'ai déjà réussi un bout. Mais, il reste encore le problème de l'emplacement des onglets choix. Je donne le lien de la page : http://www.triebzug.ch/menu.html
Vous allez sur l'onglet trains puis simplement clisser sur la 1er proposition. On peut voir les onglets suivant sont pas bien à coté.

En complément le CSS de cette partie avec rajout proposés :

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
menuDeroulant li:hover > .choix  { display: block; }
#menuDeroulant  .choix 
{
    position: absolute;
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuderoulant .choix  li
{
    float: none; 
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent; 
	border-right: 1px solid transparent;
}
#menuDeroulant .choix  li a:link,
 #menuderoulant .choix  li a:visited
 {
    display: block;
	color: #090800;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("http://www.triebzug.ch/divers/logobilde.jpg");
    position: absolute;
	left: 150px;
}
#menuDeroulant .choix  li a:hover
{
   background-image: none;
   background-color: #FCBF49;
}

**Mahefasoa** · 06/10/2012, 07h59

Bonjour,

En modifiant un peu tes directives CSS, on arrive à obtenir quelque chose. En blue ce que j'ai ajouté et en rouge ce que j'ai supprimé.

/styles.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
/* ligne 40 */
#menuDeroulant li {
    border: 0 none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 150px;
}
/* ligne 98 */
#menuDeroulant .choix {
    border: 0 none;
    display: none;
    left: 150px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
/* ligne 117 */
#menuDeroulant .choix li a:link, #menuderoulant .choix li a:visited {
    background: url("http://www.triebzug.ch/divers/logobilde.jpg") repeat scroll 0 0 transparent;
    border: 0 none;
    color: #090800;
    display: block;
    left: 150px;
    margin: 0;
    position: absolute;
    text-decoration: none;
}

Cordialement,
Mahefasoa

**demu73** · 06/10/2012, 20h27

Effectivement, on se raproche du but rechercher. Il y a juste encrore le soucis que le niveau inferieur est un poil pas à coté de l'onglet désirer. Il reste plus qu'à trouver comme mettre se niveau bien à coté de l'autre.

Déjà merci pour cette avance.

**Mahefasoa** · 06/10/2012, 21h32

Bonsoir,

Envoyé par demu73

Il y a juste encrore le soucis que le niveau inferieur est un poil pas à coté de l'onglet désirer. Il reste plus qu'à trouver comme mettre se niveau bien à coté de l'autre.

Tout simplement parce que tu as omis une directive top: 0; dans ton CSS, une directive qui existait encore ce matin quand je visionnais la page exemple et que j'ai rapporté dans mes propositions.

Envoyé par Mahefasoa

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/styles.css

/* ligne 98 */
#menuDeroulant .choix {
    border: 0 none;
    display: none;
    left: 150px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}

Il faut ajouter la dernière ligne de ce bloc, c'est tout!
C'est à dire (la ligne en vert) :

Code :

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

1
2
3
4
5
6
7
8
9
10
#menuDeroulant .choix {
    border: 0 none;
    display: none;
    left: 150px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}

Cordialement,
Mahefasoa

**demu73** · 07/10/2012, 16h12

Merci maintenant, la barre fonctionne.

Seul inconvegniant, ça va pas bien pour faire la même chose avec l'onglet sous menu "BLS" (en dessous de celui "CFF").

**Mahefasoa** · 07/10/2012, 16h23

Quel est ton code?

**demu73** · 07/10/2012, 17h53

L'onglet BLS est sur la même page que déjà présentée dans ce sujet, pour facilité votre réponse, je le remet :

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
20
 
<li>
			<a href="trains.html">Les trains</a>
			<ul class="sousMenu">
			<li>
				<a href="cff.php">CFF</a> 
   				    <ul class="choix">
					<li>
					    <li><a href="re460.php">Re 460</a></li>
				        <li><a href="re44ii.php">Re 4/4 II</a></li>
				    </ul>
					</li>
 
<!--cet ongle --><li><a href="bls.php">BLS</a></li>
				<li><a href="mo.php">MO</a></li>
				<li><a href="tpf.php">TPF</a></li>
		        <li><a href="mc.php">MC</a></li>
			</ul> 
			</li> 
		<li>

Mon idée serait de mettre à cet ongle aussi des menus choix comme celui d'en dessus appeller CFF.

**Mahefasoa** · 07/10/2012, 18h59

Bonsoir,

Je t'ai demandé ton code pour la bonne et simple raison que ce que je vois sur http://www.triebzug.ch/menu.html (voir PJ) n'est pas du tout le même que ce que tu mets ici. Tu disais

Envoyé par demu73

Seul inconvegniant, ça va pas bien pour faire la même chose avec l'onglet sous menu "BLS" (en dessous de celui "CFF").

alors que tu ne l'as pas encore mis en place. Pourtant il suffisait de refaire la même chose que pour le sous-menu d'en haut.
Exemple:

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
<ul class="sousMenu">
    <li>
        <a href="cff.php">CFF</a> 
        <ul class="choix">
            <li></li>
            <li><a href="re460.php">Re 460</a></li>
            <li><a href="re44ii.php">Re 4/4 II</a></li>
        </ul>
    </li>
    <li>
        <a href="bls.php">BLS</a>
        <ul class="choix">
            <li></li>
            <li><a href="#">Choix 1</a></li>
            <li><a href="#">Choix 2</a></li>
            <li><a href="#">Choix 3</a></li>
            <li><a href="#">Choix 4</a></li>
            <li><a href="#">Choix etc.</a></li>
        </ul>
    </li>
    <a href="mo.php">MO</a>
    <a href="tpf.php">TPF</a>
    <a href="mc.php">MC</a>
</ul>

Et c'est tout, c'est pas sorcier! Idem pour tous les autres sous-menus de ton menu de navigation.

Cordialement,
Mahefasoa

**demu73** · 07/10/2012, 20h35

Un grand merci à vous, maintenant je peux continuer à développer ma barre de navigation.

Je peux mettre que ce problème est résolu grace à vous.

Menu de navigation

CSS

Discussions similaires

Partager

Partager