Integration menu css3 mega dropdown menu

**trashkiwi** · 11/03/2011, 04h43

bonjour, j'ai récupérer un script pour afficher un menu déroulant en CSS3 et jQuery : css3 mega dropdown menu (déniché ici : http://astuces-webmaster.ch/tutos/jq...ss3-jquery.php), seulement même si le script marche bien, lorsque je désire insérer du texte comme contenu dans la page, celui-ci apparait à travers le menu déroulant ...
Après plusieurs recherches infructueuses de part mes lacunes en css, je vous supplie de me donner une piste !

La page en question :
http://www.livingtoulouse.fr/site_el...s3-jquery.html

La page html :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!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="en" lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS3 Mega Dropdown Menu | By Snoupix, Soh Tanaka & Hein Maas</title>
 
<link href="css/menu.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body id="home">
<div class="container">
    <div id="header"></div>
	<div id="nav_wrapper">
		<span id="menu_start"><a href="#" class="home">Home</a></span>
	    <ul id="topnav">
	    	<li>
		    	<a href="#">
		    		<span class="single_wrapper">Accueil</span>
				</a>
	        </li>
	        <li class="liSub">
	        	<a href="#">
	        		<span class="dd_wrapper">
	        			Prestations
						<span class="dd_action"><img src="images/arrow.png" alt="" /></span>
					</span>
				</a>
              <div style="opacity: 0; display: none; width: 450px;" class="sub">
	            	<div class="row">
	                    <ul style="width: 225px;">
	                        <li><h2><a href="#">Soins-relaxants</a></h2></li>
	                        <li><a href="#">Modelage Californien / Suédois</a></li>
	                        <li><a href="#">Modelage Sérénité</a></li>
	                        <li><a href="#">Le AMMA assis</a></li>
	                        <li><h2><a href="#">Séances thérapeutiques</a></h2></li>
	                        <li><a href="#">Approche Emotivo-Rationnelle</a></li>
	                        <li><a href="#">Thèmes abordés</a></li>
 
	                    </ul>
	                    <ul style="width: 225px;">
	                        <li><h2><a href="#">&nbsp;</a></h2></li>
	                        <li><a href="#">Réflexologie Plantaire</a></li>
	                        <li><a href="#">Réflexologie palmaire</a></li>
	                        <li><a href="#">Soin Amincissement traditionnel</a></li>
	                        <li><h2><a href="#">Coaching</a></h2></li>
	                        <li><a href="#">Entretien individuel personnalisé</a></li>
	                        <li><a href="#">Réunion accompagnement-écoute</a></li>
	                    </ul>
	                </div>
 
	            </div>
	        </li>    	
	        <li class="liSub">
	        	<a href="#">
	        		<span class="dd_wrapper">
	        			Entreprises
						<span class="dd_action"><img src="images/arrow.png" alt="" /></span>
					</span>
				</a>
              <div style="opacity: 0; display: none; width: 450px;" class="sub">
	            	<div class="row">
	                    <ul style="width: 225px;">
	                        <li><a href="#">Le stress au travail</a></li>
	                        <li><h2><a href="#">Salons, congrès, expositions</a></h2></li>
	                        <li><a href="#">Le AMMA assis</a></li>
	                        <li><h2><a href="#">Tarifs</a></h2></li>
	                        <li><a href="#">Obtenir un devis</a></li>
 
	                    </ul>
	                    <ul style="width: 225px;">
 
	                        <li><a href="#">Enjeux économiques pour l'entreprise</a></li>
	                        <li><h2><a href="#">Prestations intra-entreprise / CE</a></h2></li>
		                        <li><a href="#">Le AMMA assis</a></li>
	                        <li><a href="#">Entretien individuel personnalisé</a></li>
	                        <li><a href="#">Réunion accompagnement-écoute</a></li>
 
	                    </ul>
	                </div>
 
	            </div>
	        </li> 
			<li>
				<a href="#">        	
					<span class="single_wrapper">Tarifs</span>
				</a>
	        </li>
 <li class="liSub">
	        	<a href="#">
	        		<span class="dd_wrapper">
	        			Promotions
						<span class="dd_action"><img src="images/arrow.png" alt=""/></span>
					</span>
				</a>
              <div style="opacity: 0; display: none; width: 300px;" class="sub">
	            	<ul>                	
	                	<li><a href="#">Chèque Cadeau</a></li>                       
	                </ul>
	                <ul>                	
	                	<li><a href="#">Bons de réductions</a></li>                     
	                </ul>                                
	            </div>
	        </li>
			<li>
				<a href="#">        	
					<span class="single_wrapper">Infos</span>
				</a>
	        </li>
	        <li id="last-li">        	
				<a href="#">        	
					<span class="single_wrapper">Contact</span>
				</a>
	        </li>
	    </ul>
		<span id="menu_end"><img src="images/last_li.png" width="5" height="46" alt="" /></span>
	</div>
 
 blba bkmsqdf sdqmfj kqsdf dskqf mqskd fksqj dfmsqdjfk qsmldf jmslqdjf sqdf jsdqf
 sqd fskqdmf msdjf mmqskdf sqdkf skdlfm ksf kdsfj kqsdkf qmsdfj sqdfj msjdf    
</div>
 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
         /*
         * jQuery Mega Drop Down Menu script by Soh Tanaka
         * http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
         * 
         */
         $(document).ready(function(){
 
         function megaHoverOver(){
         $(this).find(".sub").stop().fadeTo('fast', 1).show();
 
         //Calculate width of all ul's
         (function($) {
         jQuery.fn.calcSubWidth = function() {
         rowWidth = 0;
         //Calculate row
         $(this).find("ul").each(function() { 
         rowWidth += $(this).width(); 
         }); 
         };
         })(jQuery); 
 
         if ( $(this).find(".row").length > 0 ) { //If row exists...
         var biggestRow = 0; 
         //Calculate each row
         $(this).find(".row").each(function() { 
         $(this).calcSubWidth();
         //Find biggest row
         if(rowWidth > biggestRow) {
         biggestRow = rowWidth;
         }
         });
         //Set width
         $(this).find(".sub").css({'width' :biggestRow});
         $(this).find(".row:last").css({'margin':'0'});
 
         } else { //If row does not exist...
 
         $(this).calcSubWidth();
         //Set Width
         $(this).find(".sub").css({'width' : rowWidth});
 
         }
         }
 
         function megaHoverOut(){
         $(this).find(".sub").stop().fadeTo('fast', 0, function() {
         $(this).hide();
         });
         }
       var config = {
         sensitivity: 2,		// number = sensitivity threshold (must be 1 or higher) 
         interval: 0, 			// number = milliseconds for onMouseOver polling interval 
         over: megaHoverOver,   // function = onMouseOver callback (REQUIRED) 
         timeout: 0, 			// number = milliseconds delay before onMouseOut 
         out: megaHoverOut 		// function = onMouseOut callback (REQUIRED) 
         }; $("ul#topnav li .sub").css({'opacity':'0'});
         $("ul#topnav li").hoverIntent(config);
 
         // Add class to the current element
         $("ul#topnav li").click(function(){
         $("ul#topnav").find("li.current").removeClass().removeAttr("class");
         $(this).addClass("current");
         });
 
         // Change arrow on hover
         $("li.liSub").hover(function(){
         $(this).find("span img").attr("src", "arrow_hover.png");
         },function(){
         $(this).find("span img").attr("src", "arrow.png");
         });
 
         // Delete the border for the last li of the submenu
         $("ul#topnav .sub ul li:last-child a").css("border", "none");
      });
         </script>
 
 
 
</body>
</html>

Le 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
body {
	background:url("../images/body_bg.png") repeat-x scroll 0 0 transparent;
	margin: 0; padding: 0;
	font: normal 10px Tahoma, Verdana, Arial, Helvetica, sans-serif;	
}
*{outline: none;}
img {border: 0;}
 
.container {
   margin: auto;
   width: 821px;
}
#header {
	background:url("../images/header.png") no-repeat scroll 0 0 transparent;
	width: 568px; height: 163px;
	float: left;
}
#nav_wrapper {
	clear: left;
}
 
span#menu_end {
	display:block;
	float:left;
	height:46px;
	width:5px;
}
 
span#menu_start {
	display:block;
	float:left;
	height:46px;
	width:52px;
}
ul#topnav {
	margin: 0; padding: 0;
	float:left;
	list-style: none;
	font-size: 1em;
	background: url("../images/back_nav.png") repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
	background: url(../images/li_border.png) no-repeat right top;	
}
ul#topnav li#last-li {
	background: none;
}
ul#topnav li#last-li a span.single_wrapper {
	float:left;
	margin:6px 6px 6px 10px;
	padding:0 10px;
}
 
ul#topnav li.liSub a, ul#topnav li a {
	color: white;
	float: left;
	height: 46px;
	line-height: 34px;
	padding: 0;
	text-decoration: none;
	text-shadow: 0 0 2px black;
	text-transform: uppercase;
	z-index: 200;
}
 
span#menu_start a {
	background: url(../images/home_nav.png) no-repeat left top;
	width: 52px; height: 46px;
	text-indent: -9999px;
	padding:0; margin:0;
}
span#menu_start a:hover  { background-position: left -46px; }
span#menu_start a:active { background-position: left -92px; }
 
span#menu_start a {	display:block; line-height: 46px; }
 
ul#topnav li .sub {
	position: absolute;	
	top: 46px; left: 10px;
	background: #FFFFFF;
	background-color: #f8f8f8\9; /* le  \9  est un hack pour cibler IE8, IE7 et IE6 */ 
	border-bottom: 1px solid #cbcbcb\9;
	border-left: 1px solid #cbcbcb\9;
	border-right: 1px solid #cbcbcb\9;
	padding: 10px 10px 10px;
	float: left;
 
	border-bottom-right-radius:		    10px;
	-moz-border-radius-bottomright:     10px;
	-khtml-border-radius-bottomright:   10px;
	-webkit-border-bottom-right-radius: 10px;
 
	border-bottom-left-radius:		    10px;
	-moz-border-radius-bottomleft:      10px;
	-khtml-border-radius-bottomleft: 	10px;
	-webkit-border-bottom-left-radius:  10px;
 
	box-shadow:0px 0px 5px #5a5a5a;
	-moz-box-shadow:0px 0px 5px #5a5a5a;
	-webkit-box-shadow:0px 0px 5px #5a5a5a;
	display: none;
	z-index: -10;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%;
	color: #fff;
	background: none;
}
ul#topnav .sub ul li h2 {
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a, ul#topnav .sub ul li h2 a:hover {
	padding: 5px 0;
	background-image: none;
	color: #c10707;
}
ul#topnav .sub ul li h2 a:hover {
	background-image: none;
	text-decoration: underline;
}
ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0;
	height: auto;
	background: url(../images/navlist_arrow.png) no-repeat 0px 10px;
	padding: 0 0 0 18px;
	margin: 0 10px;
	display: block;
	text-decoration: none;
	color: #757575;
	font-size:1.1em;
	text-shadow: none;
	border-bottom: 1px solid #e6e6d8;
	text-transform: none;
	line-height:27px;
}
ul#topnav .sub ul li a:hover {
	color: #c50a0a;
	background: url(../images/navlist_arrow_hover.png) no-repeat 0px 10px;
	text-decoration: underline;
}
 
span.dd_action {
	height:6px;
	padding:0 0 0 10px;
	width:9px;
}
 
span.single_wrapper {
	float:left;
	margin:6px 10px;
	padding:0 15px;
}
 
span.single_wrapper:hover, li.current a span.single_wrapper {
	background: white;
	color: black;
 
	/* -- CSS3 stuff -- */
 
	text-shadow: none;
 
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFFFFFFF, endColorstr=#FFe5e5e5);
	background-image: -moz-linear-gradient(	top, #FFFFFF, #e5e5e5);
	background-image: -webkit-gradient( linear,	left top, left bottom, from(#FFFFFF), to(#e5e5e5));
 
	border-radius: 	       7px; /* Propriété CSS3 générale et pour Opera */
	-moz-border-radius:    7px; /* Propriété CSS3 pour Firefox */
	-khtml-border-radius:  7px; /* Propriété CSS3 pour navigateurs KHTML */
	-webkit-border-radius: 7px; /* Propriété CSS3 pour navigateurs Webkit */
 
	box-shadow:         0px 0px 2px #343333; /* Propriété CSS3 */
	-webkit-box-shadow: 0px 0px 2px #343333; /* Propriété CSS3 pour Firefox */
	-moz-box-shadow:    0px 0px 2px #343333; /* Propriété CSS3 pour navigateurs Webkit */
}
 
span.single_wrapper:active {
	background: white;	
	color: black;
 
	/* -- CSS3 stuff -- */
 
	text-shadow: none;
 
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFe5e5e5, endColorstr=#FFFFFFFF);
	background-image: -moz-linear-gradient(	top, #e5e5e5, #FFFFFF);
	background-image: -webkit-gradient( linear, left top, left bottom, from(#e5e5e5), to(#FFFFFF));
 
	border-radius:         7px;
	-moz-border-radius:    7px;
	-khtml-border-radius:  7px;
	-webkit-border-radius: 7px;
 
	box-shadow:         0px 0px 2px #343333;
	-webkit-box-shadow: 0px 0px 2px #343333;
	-moz-box-shadow:    0px 0px 2px #343333;
}
 
span.dd_wrapper {
	float:left;
	margin:6px 10px 0;
	padding:0 11px 6px 18px;
}
 
li.liSub a:hover span.dd_wrapper, li.liSub:hover a span.dd_wrapper {
	z-index:      100;
	background:   white;
	color: 		  black;
	border-top:   1px solid #e5e5e5;	
	border-right: 1px solid #989898;
	padding:	  0 10px 6px 18px;	
 
	/* -- CSS3 stuff -- */
 
	text-shadow: none;
 
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#dfdfdf, endColorstr=#f8f8f8); /* Pour IE */
	background-image: -moz-linear-gradient(	top, #e5e5e5, #FFFFFF); /* Pour Firefox */
	background-image: -webkit-gradient( linear,	left top, left bottom, from(#e5e5e5), to(#FFFFFF)); /* Pour Webkit */
 
	border-top-right-radius:		 7px;
	-moz-border-radius-topleft: 	 7px;
	-webkit-border-top-left-radius:  7px;
	-khtml-border-radius-topleft: 	 7px;
 
	border-top-left-radius:		     7px;
	-moz-border-radius-topright: 	 7px;
	-webkit-border-top-right-radius: 7px;
	-khtml-border-radius-topright: 	 7px;
}

**ornitho13** · 11/03/2011, 09h21

Salut,

Tu peux jouer avec le z-index pour mettre en avant ton menu dans le plan.
Tu peux également mettre ton contenu avant le menu et tu replaces le menu au bon endroit ( en position absolue par exemple).

Par contre englobe ton contenu dans des <div> par exemple

**trashkiwi** · 12/03/2011, 17h37

merci beaucoup pour le tuyau que je vais mettre en application dès lundi !
Merci !!!!

Integration menu css3 mega dropdown menu

CSS

Discussions similaires

Partager

Partager