How To Create a Mega Drop Down Menu in Blogger

Advertisements
Over the previous couple of years, the world of the Blogosphere has progressed quite handsomely. Nowadays Bloggers and webmasters are concentrating more on their website’s designing rather than focusing on their content. Undoubtedly, having a beautiful website is the latest trend and even visitors admire those blogs which are highly professional in terms of their Layout, Header, Footer, Menu and etc. Therefore, having a clean and perfect navigation are the basic needs of each and every blog. However, majority of blogs are still using the old navigation menus which kills the complete presentation of a blog. If your site’s navigation is not perfect then how can you expect your visitors to search your website in depth? Today we will learn how to create a Fresh Mega Drop down Menu for blogger blogs.




Why To Use Mega Drop Menu:

The biggest advantage of having a Mega navigation menu is that it keeps the thinks together in one place, so your visitors won’t have to spend much time in searching for a specific category of their interest. On the other hand, it will keep your blog look clean and elegant because the complete site navigation keeps things together.

How Mega Drop Down Menu Looks Like:

Unlike other mega menus, it has an elegant design which will compliment your website or weblog because you can easily change its color according to your desired needs. It is thin in size so it’s quite clear that it can easily fit any site without any problem whatsoever. Following is the animated representation of the MBL Mega Drop Down Menu.


Some Key Features Of MBL Mega Drop Menu:

Following are some of the foremost features of the Drop menu which will not only amuse you but your visitors would love to play with it.
  • It supports almost every browser i.e. Firefox, Chrome and Internet explorer.  
  • You can easily change its color to match the color scheme of your website.
  • Unlike other menus, only one JavaScript is used so it is extremely light weighted.
  • It has a cute Email Subscription box in the drop down menu that will maximize your subscribers.

How To Create a Mega Drop Down Menu in Blogger:

Just like our previous tutorials, the steps are pretty much straightforward and world hardly take 10 minutes to complete the integration. Just follow the following instructions correctly.

  • Go To Blogger.com >> Your Site >> Template.
  • Try to make a habit of creating a Backup of templates before editing it.
  • Select Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> and paste the following Style sheet coding.
  1. /*  MBL Mega Drop Down Menu Bar For Blogger (www.mybloggerlab.com) */
  2. ul.dropmenu{
  3. position: relative;
  4. margin: 0px;
  5. padding: 1px 0px 0px 0px;
  6. background:transparent url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0;
  7. display:block;
  8. height: 35px;
  9. font-family:Verdana,Arial,Helvetica,sans-serif;
  10. font-size: 12px;
  11. }
  12. .dropmenu li{
  13. position: relative;
  14. list-style: none;
  15. float: left;
  16. margin: 0px;
  17. padding: 0px;
  18. }
  19. .dropmenu li a{
  20. height: 22px;
  21. padding: 9px 30px 0px 15px;
  22. display: block;
  23. cursor: point;
  24. border-right: solid 1px #4a779d;
  25. color: #FFFFFF;
  26. text-transform: uppercase;
  27. text-decoration: none;
  28. }
  29. .dropmenu li span{
  30. display: block;
  31. float: right;
  32. height: 10px;
  33. width: 10px;
  34. background:transparent url(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0;
  35. position: absolute;
  36. top: 12px;
  37. right: 10px;
  38. }
  39. .dropmenu li  a:hover span{
  40. background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0;
  41. }
  42. .dropmenu li:hover ul, .dropmenu li:hover div{
  43. display: block;
  44. }
  45. .dropmenu ul{
  46. position: absolute;
  47. display: none;
  48. width: 140px;
  49. padding: 0px;
  50. margin: 0px;
  51. border-bottom: 1px solid #ccc;
  52. background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
  53. }
  54. .dropmenu ul li{
  55. border: 0;
  56. float: none;
  57. }
  58. .dropmenu ul a {
  59.   border: 1px solid #ccc;
  60.   border-bottom: 0;
  61.   white-space: nowrap;
  62.   display:block;
  63.   color: #0657AD;
  64.   text-decoration: underline;
  65.   text-transform: none;
  66. }
  67. a.selected, a:hover{
  68. color: #0657AD !important;
  69. background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
  70. }
  71. a.selected span{
  72. background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0;
  73. }
  74. .dropmenu ul a:hover {
  75. color:#F67A00 !important;
  76. text-decoration: none;
  77. background-color: #F0F0F0;
  78. background-image: none;
  79. }
  80. .dropmenu div ul{
  81. position: relative;
  82. display: block;
  83. }
  84. .dropmenu li div{
  85. background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
  86. border: 1px solid #ccc;
  87. padding: 5px;
  88. display: none;
  89. position: absolute;
  90. }
  91. .dropmenu li div ul{
  92. border: none;
  93. background: none;
  94. position: relative !important;
  95. }
  96. .dropmenu li div a{
  97. border: none;
  98. border-bottom: 1px solid #ccc;
  99. }
  100. .dropmenu li div div{
  101. display: block;
  102. position: relative;
  103. background: none;
  104. border: none;
  105. }
  106. .dropmenu li div div a{
  107. display: inline;
  108. border: none;
  109. color: #666;
  110. text-decoration: underline;
  111. padding: 0px;
  112. margin: 0px;
  113. text-transform: none;
  114. }
  115. .dropmenu li div div a:hover{
  116. color: #000;
  117. text-decoration: none;
  118. }
  119. ul.left{
  120. float: left;
  121. width: 145px;
  122. }
  123. ul.right{
  124. float: right;
  125. width: 145px;
  126. }
  127. .small{
  128. color: #666;
  129. font-size: 10px;
  130. padding: 10px 5px 8px 5px !important;
  131. display: block;
  132. clear: both;
  133. }
  134. .products{
  135. width: 300px;
  136. padding: 15px !important;
  137. }
  138. .products ul{
  139. width: 100%;
  140. }
  141. .products ul li{
  142. border-bottom: 1px solid #ccc;
  143. height: 40px;
  144. padding: 10px 0px;
  145. }
  146. .products h2{
  147. font-size: 16px;
  148. padding: 2px 0px 3px 0px;
  149. margin: 0px;
  150. }
  151. .products p{
  152. color: #666;
  153. font-size: 10px;
  154. padding: 0px;
  155. margin: 0px;
  156. }
  157. .products img{
  158. float: left;
  159. padding-right: 10px;
  160. }
  161. .products  ul li a{
  162. display: inline;
  163. border: none;
  164. color: #666;
  165. text-decoration: underline;
  166. padding: 0px;
  167. margin: 0px;
  168. text-transform: none;
  169. }
  170. .products  ul li  a:hover{
  171. color: #000 !important;
  172. text-decoration: none;
  173. background: none !important;
  174. }

  175. .tutorials{
  176. width: 300px;
  177. }


  178. input{
  179. border:1px solid #4A779D;
  180. padding: 3px 8px;
  181. margin-bottom: 8px;
  182. width: 164px;
  183. }
  184. label{
  185. padding: 0px 0px 4px 0px;
  186. display:block;
  187. }
  188. button{
  189. background: #4A779D url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0;
  190. color: #FFF;
  191. border:1px solid #4A779D;
  192. padding: 4px 10px;
  193. width: 180px;
  194. }

  195. .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}

  196. .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

  197. .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

  • Again search for </head> and above it paste the following JQuery coding.
  1. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script> 
  2. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/dropdown.js"></script> 
  3. <script>
  4. $(document).ready(function(){
  5. $("#nav-one").dropmenu();
  6. });
  7. </script>
  • Now Save your template by pressing Save template button.

Adding the Mega Drop Down Menu To Blogger

Now with in your template search for the following chunk of coding. Remember it is not necessary that you have the exact same coding, just look for the similar coding. TIP: To Find the coding quickly Search for "Header1" or "(Header)". 

  1. <div id='header-wrapper'> 
  2. <div class='headerleft'> 
  3. <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
  4. <b:widget id='Header1' locked='true' title='My Blogger Lab (Header)' type='Header'/>
  5. </b:section> 
  6. </div>
Once you have found the Similar coding then below it paste the following Mega Menu HTML Coding. 


  1. <ul id="nav-one" class="dropmenu"> 
  2. <li> 
  3.     <a href="#">Home</a> </li><li> 
  4.     <a href="#">Forum</a><ul> 
  5.         <li><a href="#">Support</a></li> 
  6. <li><a href="#">Help</a></li> 
  7. <li><a href="#">Examples</a></li>
  8. <li><a href="#">Your work</a></li>
  9. </ul> 
  10. </li> 
  11. <li> 
  12.     <a href="#item3">Downloads</a><ul> 
  13.        <li><a href="#">Tools</a></li> 
  14.        <li><a href="#">Office</a></li> 
  15.        <li><a href="#">Custom projects</a></li> 
  16. </ul> 
  17. </li>  
  18. <li> 
  19. <a href="#">Products</a> 
  20. <div class="products">
  21. <ul> 

  22. <li><img src="http://4.bp.blogspot.com/-brA1qvvpyXg/UGcoWTlHWLI/AAAAAAAAFsw/jUSjTHOvh88/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li> 
  23. <li><img src="http://1.bp.blogspot.com/-vhdwdqNcO7g/UGcoXnXac1I/AAAAAAAAFs4/eo2_Cl4GaH8/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li> 
  24. <li><img src="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li> 
  25.  
  26. <li><img src="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li> 
  27. <li><img src="http://4.bp.blogspot.com/-umDs7rKTFZQ/UGcocADb7ZI/AAAAAAAAFtQ/1dTOjPwJc0M/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li> 
  28. <li><img src="http://3.bp.blogspot.com/-AxTQpVFuxbs/UGcodrtWdqI/AAAAAAAAFtY/MA8K3gCE41w/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li> 
  29. <li><img src="http://2.bp.blogspot.com/-KFHxELM1ei0/UGcoeqDaqqI/AAAAAAAAFtc/2jLBgm53Ws0/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li> 
  30. </ul>

  31. <div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
  32. </div>
  33. </li>
  34. <li> 

  35. <a href="#">Tutorials</a> 
  36. <div class="tutorials">
  37. <ul class="left"> 
  38. <li><a href="#">Javascript</a></li> 
  39. <li><a href="#">Python</a></li> 
  40. <li><a href="#">PHP</a></li> 
  41. </ul>
  42. <ul class="right"> 
  43. <li><a href="#">HTML/CSS</a></li> 
  44. <li><a href="#">ASP.NET</a></li> 
  45. <li><a href="#">Actionscript</a></li> 
  46. </ul>
  47.  <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
  48. </div>
  49. </li>
  50. <li> 

  51. <a href="#">Links</a> <ul> 
  52.   <li><a href="#">Programming</a></li> 
  53.   <li><a href="#">Inspiration</a></li> 
  54.    <li><a href="#">My websites</a></li> 
  55.    <li><a href="#">Clients</a></li> 
  56.    <li><a href="#">Cool stuff</a></li> 
  57.    <li><a href="#">Sitebase</a></li> 
  58.    <li><a href="#">Other</a></li> 
  59. </ul> 
  60. </li>
  61. <li> 

  62. <a href="#">Subscribe Now</a> 
  63. <div class="emailsub">
  64.         <div class="emailupdatesform">
  65.         <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYBLOGGERLAB', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
  66. </li>
  67. </ul>
Customization:
Replace MYBLOGGERLAB with your RSS Feed Email Subscription Username.
Replace All Light Pink,Light Orange,Light Blue Links According to your needs.


From The Editor’s Desk:
We hope you have enjoyed the feast, this week we have shared almost three totally unique widgets i.e. Twitter Man, Sticky Footer and this Mega Menu. Our Developers are busy in creating a new Blogger Template so keep your figures cross. If you have any difficulty while adding this Mega Menu feel free to ask till then Peace, Blessings and Happy learning.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

25 comments

September 29, 2012 at 9:39 PM

Thanks for this great post..
Very COOL..!!

Kep it up bro...

www.MoreBlogTools.com

More Blog Tools

September 30, 2012 at 2:20 AM

nice design bro with lots of feature like input box, images for selective part etc.

-Natwar Singh
Meritox

September 30, 2012 at 2:35 AM

This is the great drop down menu.usefull for those who have lots of catogories..

VideoPad Editor Worth $49 For Free-Giveaway

September 30, 2012 at 7:35 AM
September 30, 2012 at 5:37 PM

I'd love to use this menu! But when I added the code above to my blogger template (Sand Dollar) I get this message:

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "img" must be followed by either attribute specifications, ">" or "/>". Code 500"

Any advice? Thanks, Mike

Editorial Team MOD
September 30, 2012 at 9:01 PM

Thanks Mike, For Reporting. There was a Small Bug in our Coding which is Removed. And Every Things Works Perfectly Now. Peace and Blessings

October 8, 2012 at 1:04 AM

i have done it but the dropdown menu is not working
cursor is not stop on the links

Editorial Team MOD
October 8, 2012 at 6:41 AM

Provide us your Blog URL, Where you have applied it. Peace

March 10, 2013 at 1:08 PM

Nice, I will try this out !!
thank you man

March 15, 2013 at 6:38 AM

Thanks for posting this. Very helpful. Thank you so much. But i have a long doubt. How to post behalf of the menus like home etc,.

Editorial Team MOD
March 15, 2013 at 9:21 AM

You Have to create a Label For Every Category Like "Tutorials" "News" and Link them to your Menu. Now Whenever, you are publishing articles you can use that certain "Label" to show up the articles whenever user navigate your menu.

We are currently working on a article that would help you understanding better that how Label Works!.

March 20, 2013 at 11:59 AM

Very cool, man.
But I have a confusion problem.
I have a test blog and it drops the menu, but when I put the code on my real blog, it doesn't drop any menu :\

March 20, 2013 at 12:47 PM

I just resolved the problem, meanwhile, I discovered a bug.
It's all the imagens on blog stay with the background from the Menu.

March 29, 2013 at 3:04 AM

Thanks! It worked well for my template.

March 29, 2013 at 10:39 AM

Hello, it's not working for me, I put the whole code in and it all looks like a normal menu, not drop down and it takes up half of the page. I mean everything, every word is printed on the screen. What can be wrong?

Editorial Team MOD
March 30, 2013 at 3:25 AM

Your blog URL?

April 23, 2013 at 2:31 AM

It is so cute. But i cannot use that. All i need is a girly one for a girly blog. But yet creative

May 1, 2013 at 12:20 AM

At first it went to me like that. Check whether you pasted that style code above the ]]></b:skin. And this drop down menu works only in the simple templates of blogger.

May 1, 2013 at 7:09 AM

drop down menu went behind my post, was working fine till yesterday suddenly noticed this, Please help bro.

http://idiotsfreedownload.blogspot.in/

Editorial Team MOD
May 1, 2013 at 11:23 AM

There is a problem in your Template. The reason they are getting behind.

June 26, 2013 at 10:42 AM

Hey,

Sorry i want to ask are the blue light the name of the page? And if yes. Must i replace the "#" with the label only or the web address Url? Please i need help.

September 5, 2013 at 9:30 PM

Is there is anyway to add sub drop down menu to existing navigation bar? I'm using Go Green Template (Released by u in templatism), please have a look at my site- www.makeuseofandroid.com. Your help really appreciated :D

October 26, 2013 at 9:48 AM

I add all codes correctly but my old menu is appeared below the MEGA DROPDOWN menu. :(

Editorial Team MOD
October 27, 2013 at 4:23 PM

Yes because you have to delete your old menu on your own first

December 2, 2013 at 8:11 AM

''drop down menu went behind my post''
mine too :(
i use default blogger template and don't know what have to change.
saprirodom.blogspot.com

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.