Bonjours a tous.

J'ai un menu déroulant horizontal.

Voici les codes :

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
var ddsmoothmenu={
 
arrowimages: {down:[23], right:[]},
transition: {overtime:300, outtime:300}, 
shadow: {enable:true, offsetx:5, offsety:5}, 
showhidedelay: {showdelay: 100, hidedelay: 200}, 
 
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, 
detectie6: document.all && !window.XMLHttpRequest,
 
getajaxmenu:function($, setting){ 
	var $menucontainer=$('#'+setting.contentsource[0]) 
	$menucontainer.html("Loading Menu...")
	$.ajax({
		url: setting.contentsource[1],
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},
 
 
buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul") 
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
	var $headers=$mainmenu.find("ul").parent()
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ 
		var $curobj=$(this).css({zIndex: 100-i}) 
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		$subul.data('timers', {})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false 
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( 
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			+ '" style="border:0;" />'
		)
		$curobj.hover(
			function(e){
				var $targetul=$subul 
				var header=$curobj.get(0) 
				clearTimeout($targetul.data('timers').hidetimer)
				$targetul.data('timers').showtimer=setTimeout(function(){
					header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
					var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
					menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft 
					if ($targetul.queue().length<=1){ 
						$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
						if (smoothmenu.shadow.enable){
							var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
							var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
							if (!header.istopheader && ddsmoothmenu.detectwebkit){ 
								header.$shadow.css({opacity:1})
							}
							header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
						}
					}
				}, ddsmoothmenu.showhidedelay.showdelay)
			},
			function(e){
				var $targetul=$subul
				var header=$curobj.get(0)
				clearTimeout($targetul.data('timers').showtimer)
				$targetul.data('timers').hidetimer=setTimeout(function(){
					$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
					if (smoothmenu.shadow.enable){
						if (ddsmoothmenu.detectwebkit){ 
							header.$shadow.children('div:eq(0)').css({opacity:0})
						}
						header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
					}
				}, ddsmoothmenu.showhidedelay.hidedelay)
			}
		) 
	}) 
	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
},
 
init:function(setting){
	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ 
		var mainmenuid='#'+setting.mainmenuid
		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
		document.write('<style type="text/css">\n'
			+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
			+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
		+'</style>')
	}
	this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable
	jQuery(document).ready(function($){ 
		if (typeof setting.contentsource=="object"){ 
			ddsmoothmenu.getajaxmenu($, setting)
		}
		else{ 
			ddsmoothmenu.buildmenu($, setting)
		}
	})
}
 
}
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
<script type="text/javascript">
			ddsmoothmenu.init({
				mainmenuid: "menu", 
				orientation: 'h', 
				classname: 'ddsmoothmenu', 				
				contentsource: "markup" 
			})
		</script>
	</head>
	<body>
		<div id="page">
			<div id="menu">
			<ul>
			<li><a href="">Site Map</a></li>
			<li><a href="#">Folder 0</a>
			  <ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  </ul>
			</li>
			<li><a href="#">Folder 1</a>
			  <ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  </ul>
			</li>
			<li><a href="#">Folder 2</a>
			  <ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  </ul>
			</li>
			<li><a href="#">Folder 3</a>
			  <ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  </ul>
			</li>
			<li><a href="#">Folder 4</a>
			  <ul>
			  <li><a href="#">Sub Item 1.1</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  <li><a href="#">Sub Item 1.2</a></li>
			  <li><a href="#">Sub Item 1.3</a></li>
			  <li><a href="#">Sub Item 1.4</a></li>
			  </ul>
			</li>
			</ul>
 
			</ul>
			<br style="clear: left" />
			</div>
J'aimerais avoir un nouveau bouton. Ou lorsque je clique sur site map par exemple. Il m'ouvre tous les sous menu, et me les referme que si je reclique sur le bouton en question.

Comment faire ceci.

Lien vers le menu déroulant en question : http://www.dynamicdrive.com/dynamici...smoothmenu.htm

Merci de votre aide

Cordialement