How To Create a Mega Drop Down Menu in Blogger

Posted by Editorial Team on 9/29/2012 in Blogger Widgets

http://www.mybloggerlab.com/2012/09/how-to-create-mega-drop-down-menu-in.html

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’sdesigning 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.

Mega Drop Down Menu (DEMO)

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.

2. /*  MBL Mega Drop Down Menu Bar For Blogger (www.mybloggerlab.com) */
3. ul.dropmenu{
4. position: relative;
5. margin: 0px;
6. padding: 1px 0px 0px 0px;
7. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1k_5wFCiDJOZATLYUnLi9eyU_TyK3BdupfcLk5YXssMJcN2bydxSE6wfaGMYHBdZSLI4ltgVg9oT4NBDZjlGZuj99fhNdT9yH4q487eqq5oYyeCKqBlpgMBAKD3I81KeXoFCzg_rFgK8/s1600/navigation.png) repeat-x scroll 0 0;
8. display:block;
9. height: 35px;
10. font-family:Verdana,Arial,Helvetica,sans-serif;
11. font-size: 12px;
12. }
13. .dropmenu li{
14. position: relative;
15. list-style: none;
16. float: left;
17. margin: 0px;
18. padding: 0px;
19. }
20. .dropmenu li a{
21. height: 22px;
22. padding: 9px 30px 0px 15px;
23. display: block;
24. cursor: point;
25. border-right: solid 1px #4a779d;
26. color: #FFFFFF;
27. text-transform: uppercase;
28. text-decoration: none;
29. }
30. .dropmenu li span{
31. display: block;
32. float: right;
33. height: 10px;
34. width: 10px;
35. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYV6Kuf9fAzSbUZ1f6N7iRUAZia_L3aKSgEWZjzwApwhh6U3BGUQxzKRWt26MhDYhNRM47keaN4putPdPQmn4PaV3T3jl5lJQYAIn4pbBx4oigBZ5lQ0ESMI4l-_IQfxHyOCJuNmyom_M/s1600/arrow_up.png) repeat-x scroll 0 0;
36. position: absolute;
37. top: 12px;
38. right: 10px;
39. }
40. .dropmenu li  a:hover span{
41. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHruRtqbkNEfPZJJQDxDyjbF1bidLw9wn0k8-k0UbgE-16qgv_iIuxZcx509fWKiTT0VklCLmE3W50ccEgGD4QuCrB-Z0UzZWR5AsHz5g0Yg2cInt8sJHc6i4ipl3XXzvb7R0TxRqYDoo/s1600/arrow_hover.png) repeat-x scroll 0 0;
42. }
43. .dropmenu li:hover ul, .dropmenu li:hover div{
44. display: block;
45. }
46. .dropmenu ul{
47. position: absolute;
48. display: none;
49. width: 140px;
50. padding: 0px;
51. margin: 0px;
52. border-bottom: 1px solid #ccc;
53. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhln9KGdfaW7jQTFy4RLGtQyJATBDqrNVF9OtuPkYjwzuA2USrMi8sCiFNnyx4M88YzbVXNVc0uA5E6xHu_YuQnYWKhhGoUHdDsN-P1bXf2eR9xM5WXeNskayMaUlsvEqj-jiYcqc6Q_yA/s1600/gradient.png) repeat-x scroll 0 0;
54. }
55. .dropmenu ul li{
56. border: 0;
57. float: none;
58. }
59. .dropmenu ul a {
60.   border: 1px solid #ccc;
61.   border-bottom: 0;
62.   white-space: nowrap;
63.   display:block;
64.   color: #0657AD;
65.   text-decoration: underline;
66.   text-transform: none;
67. }
68. a.selected, a:hover{
69. color: #0657AD !important;
70. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhln9KGdfaW7jQTFy4RLGtQyJATBDqrNVF9OtuPkYjwzuA2USrMi8sCiFNnyx4M88YzbVXNVc0uA5E6xHu_YuQnYWKhhGoUHdDsN-P1bXf2eR9xM5WXeNskayMaUlsvEqj-jiYcqc6Q_yA/s1600/gradient.png) repeat-x scroll 0 0;
71. }
72. a.selected span{
73. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHruRtqbkNEfPZJJQDxDyjbF1bidLw9wn0k8-k0UbgE-16qgv_iIuxZcx509fWKiTT0VklCLmE3W50ccEgGD4QuCrB-Z0UzZWR5AsHz5g0Yg2cInt8sJHc6i4ipl3XXzvb7R0TxRqYDoo/s1600/arrow_hover.png) repeat-x scroll 0 0;
74. }
75. .dropmenu ul a:hover {
76. color:#F67A00 !important;
77. text-decoration: none;
78. background-color: #F0F0F0;
79. background-image: none;
80. }
81. .dropmenu div ul{
82. position: relative;
83. display: block;
84. }
85. .dropmenu li div{
86. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhln9KGdfaW7jQTFy4RLGtQyJATBDqrNVF9OtuPkYjwzuA2USrMi8sCiFNnyx4M88YzbVXNVc0uA5E6xHu_YuQnYWKhhGoUHdDsN-P1bXf2eR9xM5WXeNskayMaUlsvEqj-jiYcqc6Q_yA/s1600/gradient.png) repeat-x scroll 0 0;
87. border: 1px solid #ccc;
88. padding: 5px;
89. display: none;
90. position: absolute;
91. }
92. .dropmenu li div ul{
93. border: none;
94. background: none;
95. position: relative !important;
96. }
97. .dropmenu li div a{
98. border: none;
99. border-bottom: 1px solid #ccc;
100. }
101. .dropmenu li div div{
102. display: block;
103. position: relative;
104. background: none;
105. border: none;
106. }
107. .dropmenu li div div a{
108. display: inline;
109. border: none;
110. color: #666;
111. text-decoration: underline;
112. padding: 0px;
113. margin: 0px;
114. text-transform: none;
115. }
116. .dropmenu li div div a:hover{
117. color: #000;
118. text-decoration: none;
119. }
120. ul.left{
121. float: left;
122. width: 145px;
123. }
124. ul.right{
125. float: right;
126. width: 145px;
127. }
128. .small{
129. color: #666;
130. font-size: 10px;
131. padding: 10px 5px 8px 5px !important;
132. display: block;
133. clear: both;
134. }
135. .products{
136. width: 300px;
137. padding: 15px !important;
138. }
139. .products ul{
140. width: 100%;
141. }
142. .products ul li{
143. border-bottom: 1px solid #ccc;
144. height: 40px;
145. padding: 10px 0px;
146. }
147. .products h2{
148. font-size: 16px;
149. padding: 2px 0px 3px 0px;
150. margin: 0px;
151. }
152. .products p{
153. color: #666;
154. font-size: 10px;
155. padding: 0px;
156. margin: 0px;
157. }
158. .products img{
159. float: left;
160. padding-right: 10px;
161. }
162. .products  ul li a{
163. display: inline;
164. border: none;
165. color: #666;
166. text-decoration: underline;
167. padding: 0px;
168. margin: 0px;
169. text-transform: none;
170. }
171. .products  ul li  a:hover{
172. color: #000 !important;
173. text-decoration: none;
174. background: none !important;
175. }
176. 
     
177. .tutorials{
178. width: 300px;
179. }
180. 
     
181. 
     
182. input{
183. border:1px solid #4A779D;
184. padding: 3px 8px;
185. margin-bottom: 8px;
186. width: 164px;
187. }
188. label{
189. padding: 0px 0px 4px 0px;
190. display:block;
191. }
192. button{
193. background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1k_5wFCiDJOZATLYUnLi9eyU_TyK3BdupfcLk5YXssMJcN2bydxSE6wfaGMYHBdZSLI4ltgVg9oT4NBDZjlGZuj99fhNdT9yH4q487eqq5oYyeCKqBlpgMBAKD3I81KeXoFCzg_rFgK8/s1600/navigation.png) repeat-x scroll 0 0;
194. color: #FFF;
195. border:1px solid #4A779D;
196. padding: 4px 10px;
197. width: 180px;
198. }
199. 
     
200. .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
201. 
     
202. .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;}
203. 
     
204. .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;}
205. 
     

• Again search for </head> and above it paste the following JQuery coding.

4. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script> 
5. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/dropdown.js"></script> 
6. <script>
7. $(document).ready(function(){
8. $("#nav-one").dropmenu();
9. });
10. </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)". 

3. <div id='header-wrapper'> 
4. <div class='headerleft'> 
5. <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
6. <b:widget id='Header1' locked='true' title='My Blogger Lab (Header)' type='Header'/>
7. </b:section> 
8. </div>

Once you have found the Similar coding then below it paste the following Mega Menu HTML Coding. 

2. 
   
4. <ul id="nav-one" class="dropmenu"> 
5. <li> 
6.     <a href="#">Home</a> </li><li> 
7.     <a href="#">Forum</a><ul> 
8.         <li><a href="#">Support</a></li> 
9. <li><a href="#">Help</a></li> 
10. <li><a href="#">Examples</a></li>
11. <li><a href="#">Your work</a></li>
12. </ul> 
13. </li> 
14. <li> 
15.     <a href="#item3">Downloads</a><ul> 
16.        <li><a href="#">Tools</a></li> 
17.        <li><a href="#">Office</a></li> 
18.        <li><a href="#">Custom projects</a></li> 
19. </ul> 
20. </li>  
21. <li> 
22. <a href="#">Products</a> 
23. <div class="products">
24. <ul> 
25. 
    
26. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidF8bsmZDkI6MxsqgXtPsYY9CVT5jbB97ANm6nt2mBap5ScH5mS8rvspKCJZJ8ggTWRoONPW7NqqXXGKgu6Pwo1LmWZ6wDdyZVPFXpaueI0l7BgK0KkhjPQh7yBHWybhqaecT7pItTaIo/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> 
28. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHoppAyLxJDkUHyiFydUVUOYbP_2EHy-IXihdrI08n4IpHV_Pd7ihenydvDCQh4E4cRSXX6Yjlhyphenhyphen-j-fLab2_dgzHI8J6gcDXsJLswUdZetVFH90F0HTQ2nyInVpjvl-sw4ZOPVaaCl-c/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> 
30. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqO0bNInnpLpo2GKZmi0bNqIol4NMybBp-3YS4PpIRVFnOMiMt6PgPgb1QxO0kDxPIVq6M6OnOWCbWsw-MwH84dAnNtyNuM7IiBclpxwMCbTYoe3omJWAGJ8zL4499f7qP01mZz6lnPZA/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> 
31.  
32. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqO0bNInnpLpo2GKZmi0bNqIol4NMybBp-3YS4PpIRVFnOMiMt6PgPgb1QxO0kDxPIVq6M6OnOWCbWsw-MwH84dAnNtyNuM7IiBclpxwMCbTYoe3omJWAGJ8zL4499f7qP01mZz6lnPZA/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> 
34. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_Vd75d5v2NZwL5qeUtqW9mtuQicSYAwBKDgjpgM5qBVxCe-uWU4CYEee6i9cN56P54egKwDk1Zg4x4GDtcmVUTNnM3JySWO_zSkKlkex3P0ZS82zIjfi0agCOYH5jrsTNpknhIYE-qY/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> 
36. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQghl12Q6EoRzRaGGlbbMyZexiddRVYJ49_wz1Y_dcq7nKvoTEyqgDL5nYdAjdRL8nFZ567nMTsPnRqQmxedByrwKEOlI_ae2f1B9puXVYkJqL_g0hCRJGN48vP7TXFyhLpjAXpAW8-sU/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> 
38. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLdoKJajYDKbXO1G6VfCFM9BUiYS7bReNp3VC6_9_14JFF3UtYSjuLiUf97ZxTndodSrvzbKB2xlS5pHEzT8TsGaPPtsUvraSH2OG-mZm1gAi_4Gi53qSxG6SR7zLe3wbWhg7iztuXYk/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> 
39. </ul>
40. 
    
41. <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>
42. </div>
43. </li>
44. <li> 
45. 
    
46. <a href="#">Tutorials</a> 
47. <div class="tutorials">
48. <ul class="left"> 
49. <li><a href="#">Javascript</a></li> 
50. <li><a href="#">Python</a></li> 
51. <li><a href="#">PHP</a></li> 
52. </ul>
53. <ul class="right"> 
54. <li><a href="#">HTML/CSS</a></li> 
55. <li><a href="#">ASP.NET</a></li> 
56. <li><a href="#">Actionscript</a></li> 
57. </ul>
59.  <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
60. </div>
61. </li>
62. <li> 
63. 
    
64. <a href="#">Links</a> <ul> 
65.   <li><a href="#">Programming</a></li> 
66.   <li><a href="#">Inspiration</a></li> 
67.    <li><a href="#">My websites</a></li> 
68.    <li><a href="#">Clients</a></li> 
69.    <li><a href="#">Cool stuff</a></li> 
70.    <li><a href="#">Sitebase</a></li> 
71.    <li><a href="#">Other</a></li> 
72. </ul> 
73. </li>
74. <li> 
75. 
    
76. <a href="#">Subscribe Now</a> 
77. <div class="emailsub">
78.         <div class="emailupdatesform">
79.         <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>
80. </li> 
81. </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.