Problème menu déroulant vertical

**barbapapa2** · 31/10/2006, 11h13

Bonjour à tous,

Je tiens à préciser avant toute choses, que je débute dans ce monde de la création web. Je me suis lancé dans la création d'un Intranet et la réalisation d'un menu déroulant me pose un gros soucis... j'ai remédié à cela en contournant la difficulté en créer des boutons supplémentaires mais en fait depuis 3 semaines, j'essaie toujours et encore sans résultats et ça me trotte dans la tête.

Mais je bloque toujours, je n'arrive pas à l'appliquer à ma page

Quelqu'un pourrait-il me conseiller ou m'aider à y voir plus claire ?

Voici une partie de mon code de la page principale :

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
 
<tr>
    <td width="165" valign="top" bgcolor="#E6F3FF">
	<table border="0" cellspacing="0" cellpadding="0" width="200" id="navigation">
        <tr>
          <td width="200">&nbsp;</td>
        </tr>
        <tr>
          <td width="200"><a href="agrement.html" class="navText">Agréments</a></td>
        </tr>
        <tr>
          <td width="200"><a href="qualite.html" class="navText">Qualité</a></td>
        </tr>
        <tr>
          <td width="200"><a href="Maintenance.html" class="navText">Maintenance &amp; Navigabilité  a&eacute;ronefs </a></td>
        </tr>
        <tr>
          <td width="200"><a href="MPA_1.html" class="navText">Manuel des procédures associées</a></td>
        </tr>
	<tr>  
	  <td width="200"><a href="Operations.html" class="navText">Opérations A&eacute;riennes </a></td>
        </tr>
	<tr>
	  <td><a href="Operations_sol.html" class="navText">Op&eacute;rations sol </a></td>
	  </tr>
	<tr>
	  <td><a href="Escales.html" class="navText">Escales</a></td>
	  </tr>
	<tr>
          <td width="200"><a href="NDS.html" class="navText">Notes de Service et d'information </a></td>
        </tr>
 
	<tr>
	  <td width="200"><a href="Divers.html" class="navText">Divers  </a></td>
	  </tr>
 
	<tr>
        <td height="34"><a href="Contact.html" class="navText">CONTACT</a></td>
        </tr>
      </table>

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
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
117
118
119
120
121
122
123
124
125
126
127
 
body {
	margin:0px;
	}
 
td {
	color:#003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	}
 
a {
	color: #FF6600;
	font-weight:bold;
	}
 
a:hover {
	color: #3366CC;
	}
 
/* ID Styles */
 
#navigation td {
	border-bottom: 2px solid #C0DFFD;
	}
 
#navigation a {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 10px 26px;
	background-image: url(mm_arrow.gif);
	background-repeat: no-repeat;
	background-position: 14px 45%;
	}
 
#navigation a:hover {
	color:#FF6600;
	background-color: #ffffff;
	background-image: url(mm_arrow.gif);
	background-repeat: no-repeat;
	background-position: 14px 45%;
	}
 
#logo 	{
	color: #CCff99;
	letter-spacing:0.2em;
	line-height:40px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	}
 
#tagline 	{	
	font:12px Verdana, Arial, Helvetica, sans-serif;
	color: #FF9933;
	letter-spacing:.4em;
	line-height:18px;
	}
 
#monthformat {
	border-bottom: 2px solid #E6F3FF;
		}
 
#dateformat {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	letter-spacing:.2em;
	}
 
#dateformat a {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	font-weight:bold;
	letter-spacing:.1em;
	}
 
#dateformat a:hover {
	color: #FF6600;
	letter-spacing:.1em;
	}
 
/* Class Styles */
 
.bodyText {
	color:#3366CC;
	line-height:20px;
	margin-top:0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	}
 
.pageName{
	color: #3366CC;
	line-height:12px;
	letter-spacing:.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	}
 
.subHeader {
	font:bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #3366CC;
	line-height:16px;
	letter-spacing:.2em;
	}
 
.quote {
	font: 20px Verdana, Arial, Helvetica, sans-serif;
	color: #759DA1;
	line-height:30px;
	}
 
.smallText {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	}
 
.navText {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	}

Merci d'avance de vos conseils, j'aimerais tant lui donner l'aspect que je souhaite en supprimant ces fichus bouton qui encombrent mes pages.

**trotters213** · 31/10/2006, 11h37

Tu utilise un tableau (mal) alors que eux utilisent des listes
Pourquoi n'as-tu pas tout simplement changé le style qu'ils donnent à leurs listes, tu te serais moins embêté.

C'est un truc de ce style que tu cherches :

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
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
117
118
119
120
121
122
123
124
125
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu déroulant en CSS et javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
        for (var i = 1; i<=10; i++) {
                if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
if (d) {d.style.display='block';}
}
//-->
</script>
 
<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: #000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}
 
#menu dt {
cursor: pointer;
background: #fff;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid #c0dffd;
text-align: center;
font-weight: bold;
}
 
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #fff;
}
 
#menu ul {
padding: 2px;
}
 
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
border: 1px solid #c0dffd;
margin: 2px 0;
}
 
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}
 
#menu a:hover {
color:#f60;
}
-->
</style>
 
</head>
<body>
<dl id="menu">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
				</ul>
			</dd>				
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Menu 2</a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
				</ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="#">Menu 3</a></dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="#">Menu 4</a></dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
</dl>
</body>
</html>

**barbapapa2** · 31/10/2006, 11h58

Oui en fait, je crois que je suis mal parti dès le départ

Ne connaissant rien à la programmation en html, je suis en fait parti d'un modèle de dreamweaver et je l'ai adapté à mes besoins.

Mais en allant et me documentant au fur et à mesure, je commence à comprendre un petit peu mieux la création... sauf que maintenant c'est peut être un peu tard... j'ai déjà une cinquantaine de page html sous ce format.

Je vais essayé ce que tu as mis

Merci

**trotters213** · 31/10/2006, 12h28

ouf, il ne faut jamais se lancer dans un truc sans passer par des tutos avant.
Si tu avais simplement inclus ton menu dans tes pages tu aurais eu seulement ton menu à modifier (donc une seule page) et tu n'aurais pas eu à toucher toutes les pages faisant appel au menu

Problème menu déroulant vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager