CSS Mega Drop Down Menu for Blogger


css mega drop down menu

A CSS powered Drop Down Menu for Blogger. Mega menu’s are being used extensively these days and are really useful for displaying a huge amount of content without cluttering your layout.  The real credit for this menu goes to Guillaume Marty (You can check out his Portfolio and the Commercial version of this menu ). I have just fixed some CSS related conflicts that were happening due to the default Stylesheet that is included by Blogger. Enjoy !

Demo

Screenshot

menu screenshot

Add it in your blog

Using the One-Click Install

or Directly add the Code

layout blogger dashboard

Go to Layout and Add a HTML/JavaScript widget in the Cross Column Region . Paste the code from below in the gadget

Learn how to copy this code in one-click in FAQ

001 <div id="menu">
002 <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
003 <div class="dropdown_2columns"><!-- Begin 2 columns container -->
004 <div class="col_2">
005 <h2>Welcome !</h2>
006 </div>
007 <div class="col_2">
008 <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>            
009 <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>            
010 </div>
011 <div class="col_2">
012 <h2>Cross Browser Support</h2>
013 </div>
014 <div class="col_1">
015 <img src="https://oceboz.files.wordpress.com/2013/03/browsers.png" width="125" height="48" alt="" />
016 </div>
017 <div class="col_1">
018 <p>This mega menu has been tested in all major browsers.</p>
019 </div>
020 </div><!-- End 2 columns container -->
021 </li><!-- End Home Item -->
022 <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
023 <div class="dropdown_5columns"><!-- Begin 5 columns container -->
024 <div class="col_5">
025 <h2>This is an example of a large container with 5 columns</h2>
026 </div>
027 <div class="col_1">
028 <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
029 </div>
030 <div class="col_1">
031 <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
032 </div>
033 <div class="col_1">
034 <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
035 </div>
036 <div class="col_1">
037 <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
038 </div>
039 <div class="col_1">
040 <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
041 </div>
042 <div class="col_5">
043 <h2>Here is some content with side images</h2>
044 </div>
045 <div class="col_3">
046 <img src="https://oceboz.files.wordpress.com/2013/03/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
047 <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
048 <img src="https://oceboz.files.wordpress.com/2013/03/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
049 <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
050 </div>
051 <div class="col_2">
052 <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
053 </div>
054 </div><!-- End 5 columns container -->
055 </li><!-- End 5 columns Item -->
056 <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
057 <div class="dropdown_4columns"><!-- Begin 4 columns container -->
058 <div class="col_4">
059 <h2>This is a heading title</h2>
060 </div>
061 <div class="col_1">
062 <h3>Some Links</h3>
063 <ul>
064 <li><a href="#">ThemeForest</a></li>
065 <li><a href="#">GraphicRiver</a></li>
066 <li><a href="#">ActiveDen</a></li>
067 <li><a href="#">VideoHive</a></li>
068 <li><a href="#">3DOcean</a></li>
069 </ul>  
070 </div>
071 <div class="col_1">
072 <h3>Useful Links</h3>
073 <ul>
074 <li><a href="#">NetTuts</a></li>
075 <li><a href="#">VectorTuts</a></li>
076 <li><a href="#">PsdTuts</a></li>
077 <li><a href="#">PhotoTuts</a></li>
078 <li><a href="#">ActiveTuts</a></li>
079 </ul>  
080 </div>
081 <div class="col_1">
082 <h3>Other Stuff</h3>
083 <ul>
084 <li><a href="#">FreelanceSwitch</a></li>
085 <li><a href="#">Creattica</a></li>
086 <li><a href="#">WorkAwesome</a></li>
087 <li><a href="#">Mac Apps</a></li>
088 <li><a href="#">Web Apps</a></li>
089 </ul>  
090 </div>
091 <div class="col_1">
092 <h3>Misc</h3>
093 <ul>
094 <li><a href="#">Design</a></li>
095 <li><a href="#">Logo</a></li>
096 <li><a href="#">Flash</a></li>
097 <li><a href="#">Illustration</a></li>
098 <li><a href="#">More...</a></li>
099 </ul>  
100 </div>
101 </div><!-- End 4 columns container -->
102 </li><!-- End 4 columns Item -->
103 <li class="menu_right"><a href="#" class="drop">1 Column</a>
104 <div class="dropdown_1column align_right">
105 <div class="col_1">
106 <ul class="simple">
107 <li><a href="#">FreelanceSwitch</a></li>
108 <li><a href="#">Creattica</a></li>
109 <li><a href="#">WorkAwesome</a></li>
110 <li><a href="#">Mac Apps</a></li>
111 <li><a href="#">Web Apps</a></li>
112 <li><a href="#">NetTuts</a></li>
113 <li><a href="#">VectorTuts</a></li>
114 <li><a href="#">PsdTuts</a></li>
115 <li><a href="#">PhotoTuts</a></li>
116 <li><a href="#">ActiveTuts</a></li>
117 <li><a href="#">Design</a></li>
118 <li><a href="#">Logo</a></li>
119 <li><a href="#">Flash</a></li>
120 <li><a href="#">Illustration</a></li>
121 <li><a href="#">More...</a></li>
122 </ul>  
123 </div>
124 </div>
125 </li>
126 <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
127 <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
128 <div class="col_3">
129 <h2>Lists in Boxes</h2>
130 </div>
131 <div class="col_1">
132 <ul class="greybox">
133 <li><a href="#">FreelanceSwitch</a></li>
134 <li><a href="#">Creattica</a></li>
135 <li><a href="#">WorkAwesome</a></li>
136 <li><a href="#">Mac Apps</a></li>
137 <li><a href="#">Web Apps</a></li>
138 </ul>  
139 </div>
140 <div class="col_1">
141 <ul class="greybox">
142 <li><a href="#">ThemeForest</a></li>
143 <li><a href="#">GraphicRiver</a></li>
144 <li><a href="#">ActiveDen</a></li>
145 <li><a href="#">VideoHive</a></li>
146 <li><a href="#">3DOcean</a></li>
147 </ul>  
148 </div>
149 <div class="col_1">
150 <ul class="greybox">
151 <li><a href="#">Design</a></li>
152 <li><a href="#">Logo</a></li>
153 <li><a href="#">Flash</a></li>
154 <li><a href="#">Illustration</a></li>
155 <li><a href="#">More...</a></li>
156 </ul>  
157 </div>
158 <div class="col_3">
159 <h2>Here are some image examples</h2>
160 </div>
161 <div class="col_3">
162 <img src="https://oceboz.files.wordpress.com/2013/03/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
163 <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
164 <img src="https://oceboz.files.wordpress.com/2013/03/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
165 <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
166 </div>
167 </div><!-- End 3 columns container -->
168 </li><!-- End 3 columns Item -->
169 </div>
170
171 <style type="text/css">
172 body, ul, li {
173  font-size:14px;
174  font-family:Arial, Helvetica, sans-serif;
175  line-height:21px;
176  text-align:left;
177 }
178
179 /* Navigation Bar */
180
181 #menu {
182  list-style:none;
183  width:940px;
184  margin:30px auto 0px auto;
185  height:43px;
186  padding:0px 20px 0px 20px;
187
188  /* Rounded Corners */
189
190  -moz-border-radius: 10px;
191  -webkit-border-radius: 10px;
192  border-radius: 10px;
193
194  /* Background color and gradients */
195
196  background: #014464;
197  background: -moz-linear-gradient(top, #0272a7, #013953);
198  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
199
200  /* Borders */
201
202  border: 1px solid #002232;
203
204  -moz-box-shadow:inset 0px 0px 1px #edf9ff;
205  -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
206  box-shadow:inset 0px 0px 1px #edf9ff;
207 }
208
209 #menu li {
210  float:left;
211  text-align:center;
212  position:relative;
213  padding: 4px 10px 4px 10px;
214  margin-right:30px;
215  margin-top:7px;
216  border:none;
217 }
218
219 #menu li:hover {
220  border: 1px solid #777777;
221  padding: 4px 9px 4px 9px;
222
223  /* Background color and gradients */
224
225  background: #F4F4F4;
226  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
227  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
228
229  /* Rounded corners */
230
231  -moz-border-radius: 5px 5px 0px 0px;
232  -webkit-border-radius: 5px 5px 0px 0px;
233  border-radius: 5px 5px 0px 0px;
234 }
235
236 #menu li a {
237  font-family:Arial, Helvetica, sans-serif;
238  font-size:14px;
239  color: #EEEEEE;
240  display:block;
241  outline:0;
242  text-decoration:none;
243  text-shadow: 1px 1px 1px #000;
244 }
245
246 #menu li:hover a {
247  color:#161616;
248  text-shadow: 1px 1px 1px #FFFFFF;
249 }
250 #menu li .drop {
251  padding-right:21px;
252  background:url("https://oceboz.files.wordpress.com/2013/03/drop.png") no-repeat right 8px;
253 }
254 #menu li:hover .drop {
255  background:url("https://oceboz.files.wordpress.com/2013/03/drop.png") no-repeat right 7px;
256 }
257
258 /* Drop Down */
259
260 .dropdown_1column,
261 .dropdown_2columns,
262 .dropdown_3columns,
263 .dropdown_4columns,
264 .dropdown_5columns {
265  margin:4px auto;
266  float:left;
267  position:absolute !important;
268  left:-999em; /* Hides the drop down */
269  text-align:left;
270  padding:10px 5px 10px 5px;
271  border:1px solid #777777;
272  border-top:none;
273
274  /* Gradient background */
275  background:#F4F4F4;
276  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
277  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
278
279  /* Rounded Corners */
280  -moz-border-radius: 0px 5px 5px 5px;
281  -webkit-border-radius: 0px 5px 5px 5px;
282  border-radius: 0px 5px 5px 5px;
283 }
284
285 .dropdown_1column {width: 140px;}
286 .dropdown_2columns {width: 280px;}
287 .dropdown_3columns {width: 420px;}
288 .dropdown_4columns {width: 560px;}
289 .dropdown_5columns {width: 700px;}
290
291 #menu li:hover .dropdown_1column,
292 #menu li:hover .dropdown_2columns,
293 #menu li:hover .dropdown_3columns,
294 #menu li:hover .dropdown_4columns,
295 #menu li:hover .dropdown_5columns {
296  left:-1px ;
297 z-index:444 !important;
298     top:auto;
299 }
300
301 /* Columns */
302
303 .col_1,
304 .col_2,
305 .col_3,
306 .col_4,
307 .col_5 {
308  display:inline;
309  float: left;
310  position: relative;
311  margin-left: 5px;
312  margin-right: 5px;
313 }
314 .col_1 {width:130px;}
315 .col_2 {width:270px;}
316 .col_3 {width:410px;}
317 .col_4 {width:550px;}
318 .col_5 {width:690px;}
319
320 /* Right alignment */
321
322 #menu .menu_right {
323  float:right !important;
324  margin-right:0px;
325 }
326 #menu li .align_right {
327  /* Rounded Corners */
328  -moz-border-radius: 5px 0px 5px 5px;
329     -webkit-border-radius: 5px 0px 5px 5px;
330     border-radius: 5px 0px 5px 5px;
331 }
332 #menu li:hover .align_right {
333  left:auto;
334  right:-1px;
335  top:auto;
336 }
337
338 /* Drop Down Content Stylings */
339
340 #menu p, #menu h2, #menu h3, #menu div li {
341  font-family:Arial, Helvetica, sans-serif;
342  line-height:21px;
343  font-size:12px;
344  text-align:left;
345  text-shadow: 1px 1px 1px #FFFFFF;
346 }
347 #menu h2 {
348  font-size:21px;
349  font-weight:400;
350  letter-spacing:-1px;
351  margin:7px 0 14px 0;
352  padding-bottom:14px;
353  border-bottom:1px solid #666666;
354 }
355 #menu h3 {
356  font-size:14px;
357  margin:7px 0 14px 0;
358  padding-bottom:7px;
359  border-bottom:1px solid #888888;
360 }
361 #menu p {
362  line-height:18px;
363  margin:0 0 10px 0;
364 }
365
366 #menu li:hover div a {
367  font-size:12px;
368  color:#015b86;
369 }
370 #menu li:hover div a:hover {
371  color:#029feb;
372 }
373 .strong {
374  font-weight:bold;
375 }
376 .italic {
377  font-style:italic;
378 }
379 .imgshadow {
380  background:#FFFFFF;
381  padding:4px;
382  border:1px solid #777777;
383  margin-top:5px;
384  -moz-box-shadow:0px 0px 5px #666666;
385  -webkit-box-shadow:0px 0px 5px #666666;
386  box-shadow:0px 0px 5px #666666;
387 }
388 .img_left { /* Image sticks to the left */
389  width:auto;
390  float:left;
391  margin:5px 15px 5px 5px;
392 }
393 #menu li .black_box {
394  background-color:#333333;
395  color: #eeeeee;
396  text-shadow: 1px 1px 1px #000;
397  padding:4px 6px 4px 6px;
398
399  /* Rounded Corners */
400  -moz-border-radius: 5px;
401  -webkit-border-radius: 5px;
402  border-radius: 5px;
403
404  /* Shadow */
405  -webkit-box-shadow:inset 0 0 3px #000000;
406  -moz-box-shadow:inset 0 0 3px #000000;
407  box-shadow:inset 0 0 3px #000000;
408 }
409 #menu li ul {
410  list-style:none;
411  padding:0;
412  margin:0 0 12px 0;
413 }
414 #menu li ul li {
415  font-size:12px;
416  line-height:24px;
417  position:relative;
418  text-shadow: 1px 1px 1px #ffffff;
419  padding:0;
420  margin:0;
421  float:none;
422  text-align:left;
423  width:130px;
424 }
425 #menu li ul li:hover {
426  background:none;
427  border:none;
428  padding:0;
429  margin:0;
430 }
431 #menu li .greybox li {
432  background:#F4F4F4;
433  border:1px solid #bbbbbb;
434  margin:0px 0px 4px 0px;
435  padding:4px 6px 4px 6px;
436  width:116px;
437
438  /* Rounded Corners */
439  -moz-border-radius: 5px;
440  -webkit-border-radius: 5px;
441  border-radius: 5px;
442 }
443 #menu li .greybox li:hover {
444  background:#ffffff;
445  border:1px solid #aaaaaa;
446  padding:4px 6px 4px 6px;
447  margin:0px 0px 4px 0px;
448 }
449
450 .tabs-inner .widget li a {
451 padding: 1px ;
452 display:block !important;
453 border: 1px solid  transparent !important ;
454 }
455
456
457 </style>
458 <a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

Feel free to ask if you face any problems.

By Prayag Verma
A blogger and wannabe Web Developer + Designer currently in college learning about computers. A CSS Lover , Blogger Template Designer , Manga Fan , Geeky Nerd , Music Addict and Yogaholic ! Get more from Prayag on and Twitter
Iklan

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s