Menu de navigation

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

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, 15h47

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, 20h07

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, 10h38

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, 21h33

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, 06h59

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

Menu de navigation

CSS

Vue hybride

Discussions similaires

Partager

Partager