How to Add Click to Drop Down Menu in Blogger Blog

Drop Down menus plays a great role to inter link your blog content. And this is also helpful to visitor to easily find the thing which he wants. Click to Drop down Menus are less used as compared to Drop down Navigation Menus. But many people search for these but unable to find due to less in number. We will provide full coding and step by step method to add Click to Drop Down Menu in Blogger Blog. This can be added in Footer or Sidebar of your Blog. It will surely increase your Blog post reaches. When you click on this menu it drops down and show Links given inside it. It looks awesome. So toady I am going to write a post about Adding Click to Drop Down Menu in Blogger Blog.

(See Demo Image Here)

How to Add Click to Drop Down Menu in Blogger?

STEP-1: Login to Blogger Dashboard.

STEP-2: Go to Layout >> Add a Gadget.

STEP-3: Scroll down and select widget type as HTML/JavaScript.

STEP-4: Paste the following code inside it.

STEP-5: Then click on Save and Enjoy.

<div class="msg_list">
<p class="msg_head">Heading #1</p>
<div class="msg_body">
<ul>
<li>
<a href="#">Link Name 1 </a>
</li>
<li>
<a href="#">Link Name 2 </a>
</li>
  </ul>
  </div>
<p class="msg_head">Heading #2</p>
<div class="msg_body">
 <ul>
 <li>
<a href="#">Link Name 1 </a>
   </li>
 <li>
<a href="#">Link Name 2  </a>
   </li>
 
</ul>
<a href="http://www.bestbloggertricks.com/2014/04/5-killer-blogging-tips-2014.html" rel="dofollow" target="_blank" title="SEO Tips"></a><a href="http://www.bestbloggertricks.com" rel="dofollow" target="_blank" title="Best Blogger Tricks"></a><a style="color:#474747; padding-left:160px;" href="http://www.bestbloggertricks.com/2014/04/add-click-to-drop-down-menu.html">Get This Widget!</a>
</div>
<style>
 p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 300px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color: #494B4A;
margin: 1px;
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>

Customization: 

1- Replace all # with link URL's.

2- Replace all Link Name's with names of each Links/URL's.

3- Replace all Heading's with Heading of each Menu.

Dear Readers, if you have any query about this post then fell free to comment below. We will reply as soon as possible. Stay Blessed and Happy Blogging :)

Allah Hafiz till next post.