crée un menu déroulant

**jihadflores** · 07/02/2011, 15h22

bonjour besoin d'aide svp

quand je veux intégrer un menu déroulant que j'ai déjà crée a l'aide du forum sur mon site ca marche pas, je vais envoyer les deux code celui de mon menu et celui du site que j ai déjà crée si vous trouvez une solution pour moi svp

Code de mon menu :

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
<ul id="menuDeroulant" name="menuDeroulant">
<li> <a href="#">Acceuil</a> </li>
<li> <a href="#">chfgjfhjh</a>
<ul class="sousMenu">
<li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
<li><a href="#">Ils confectionnent des barrages !</a></li>
<li><a href="#">Ils ont des grandes dents</a></li>
</ul>
</li>
<li> <a href="#">ghghgch</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li> <a href="#">ghfghjfhj</a>
<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>
<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li> <a href="#">hfghfjhj</a> </li>
<li> <a href="#">hghfghj</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>
<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
<li> <a href="#">fgffdghdgh </a>
<li> <a href="#">fgfdg</a> </li>
<li> <a href="#">CONTACT</a> </li>
<li> <a href="#">LIENS</a> </li>
</li>
</ul>

le CSS de mon menu

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
body {
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}
 
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
 
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
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 a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#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 .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

Le code mon site :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title></title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="file:///J|/gdsb2a/fichier source/gds2a/Templates/Templates/style.css" rel="stylesheet" type="text/css" />
<link href="file:///J|/gdsb2a/fichier source/gds2a/Templates/style/new.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
#apDiv1 {
position:absolute;
left:353px;
top:313px;
width:1192px;
height:570px;
z-index:1;
}
</style>
<link href="../style/new.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div class="header">
 
<div class="logo"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1176" height="215" id="FlashID" title="logo">
<param name="movie" value="../Sans nom-1.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../Sans nom-1.swf" width="1176" height="215">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
//* je veux intergrer mon menu la *//
<div class="header_text"></div>
</div>
<!-- TemplateBeginEditable name="adherer" -->
<div class="clr" style="left: 997px; top: 311px; color: #D0712F; font-size: 18px;">
<h5>Accés Adhérents</h5>
<p></p>
<form id="form1" name="form1" method="post" action="">
<label for="textfield2">Login: </label>
<input type="text" name="textfield" id="textfield2" />
</form>
<form id="form2" name="form2" method="post" action="">
Mdp :
<input type="text" name="textfield2" id="textfield2" />
<label for="checkbox"></label>
</form>
<form id="form3" name="form3" method="post" action="">
<input type="checkbox" name="checkbox" id="checkbox" />
<label for="checkbox"></label>
se souvenir du Mdp
</form>
<form id="form4" name="form4" method="post" action="">
<p>
<input type="submit" name="connectez" id="connectez" value="Connexion" />
</p>
</form>
<form id="form5" name="form5" method="post" action="">
<label for="radio"></label>
</form>
<p>Mot de passe oublié </p>
<input name="text" type="text" class="keywords" size="10"/>
<input name="submit" type="submit" value="Rechercher" class="button" />
</div>
<!-- TemplateEndEditable -->
<div class="body">
<div class="main_body">
 
 
 
<h2><!-- TemplateBeginEditable name="titre" -->vbcnvbnvbn<!-- TemplateEndEditable --></h2>
<!-- TemplateBeginEditable name="contenu" -->
 
 
<h3>&nbsp;</h3>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis li</p>
<h3>&nbsp;</h3>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum </p>
<h3>&nbsp;</h3>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent </p>
<p>&nbsp;</p>
<!-- TemplateEndEditable --></div>
</div>
</div>
<div class="footer_block">
<div class="footer"></div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Merci d'avance

**NoSmoking** · 07/02/2011, 18h07

...de du forum sur mon site ca marche pas

cela va terriblement nous aider comme information, what else ?

PS : edites pour mettre les balises codes, bouton #, cela sera accessoirement bien plus lisible.

**ShaunY** · 15/02/2011, 17h21

Integre du JQuery et tu auras le résurtas voulu.
Je retrouve pas le tutorial que j'avais trouvé pour les div JQuery Hide/Show avec effet Slow/Medium/Fast mais tu serais surment capable de le trouver.
On apelle cela des menus accordeon.

crée un menu déroulant

HTML

Vue hybride

Discussions similaires

Partager

Partager