Make Drop Down Menu In Blogger

By default there is no drop down menu in Blogger. Just a simple navigation menu that you can make with pages gadget. The only good thing with pages gadget, it's mobile friendly means it's a responsive menu.

Tutes Inside- Make Drop Down Menu In Blogger


So, I thought of posting an article that can help people with drop down menu. This is one of the easiest drop down menu that has many features. Talking about features:-

  1. This is very easy to install menu
  2. It looks beautiful on a blog
  3. The many categories can hold many topics or simply posts
  4. Customization can be done in template designer so no headache of changing codes and all
  5. Very flexible which means you can make any change in this menu

Before we go further I'd suggest you to read this article which will help you in putting labels in this menu.

Using labels to make navigation menu in blogger
So, let's get started


Steps to follow


  • Login to your Blogger profile.
  • In Layout section click on 'Add a Gadget'
  • Select 'HTML/Javascript Gadget'
  • Copy and Paste the following code in it


<!-start dropdownmenu by Tutes Inside->
<ul id='dropdownmenu'>
<li class="active"><a href='#'>Home</a></li>
<li class="sub"><a href='#'>Menu1</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
</ul>
<!-end dropdownmenu->


  • After that you'll see something like this on your blog. Don't worry about that as we will style it with CSS.


Drop Down Menu Preview Without Styling



  • Now copy and paste this in 

Template > Customize > Advanced > Add CSS. And click on Apply.


/*--Dropdownmenu Styling by Tutes Inside--*/
#dropdownmenu{
margin:0px 0 0 -30px;
padding:0px 0px 0px 0px;
width: 1050px; /*Set Width of Blog Menu*/
font:$(tabs.font); /*Change Font Type,Size,Etc*/
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul{
background:$(tabs.background.color)$(tabs.background.gradient)
repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
height:20px; /*Height*/
list-style:none;
margin:0px;
padding:0px;
}
#dropdownmenu li{
float:left;
padding:0px;
}
#dropdownmenu li a{
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:block;
margin:0px;
font:$(tabs.font); /*Change Font Type,Size,Etc*/
text-decoration:none;
}
#dropdownmenu > ul > li > a{
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul ul a{
color:$(tabs.text.color); /*Change Font Size*/
}
#dropdownmenu li > a:hover, #dropdownmenu ul li:hover{
color:$(tabs.selected.text.color); /*Change Font Color On Hover*/
background-color:$(tabs.selected.background.color); /*Change Font BG Color*/
text-decoration:none;
}
#dropdownmenu li ul {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:100px; /*Change Width of Drop Down Menu*/
z-index:9999;
}
#dropdownmenu li:hover ul{
display:block;
}
#dropdownmenu li li {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none;/*Change Menu BG*/
display:block;
float:none;
margin:0px;
padding:0px;
width:200px; /*Change Width of DropDown Menu*/
}
#dropdownmenu li:hover li a{
background:$(tabs.selected.background.color);/*Change BG  of Link Hover*/
}
#dropdownmenu li ul a{
display:block;
height:auto;
margin:0px;
padding:10px;
text-align:left;
}
#dropdownmenu li ul a:hover, #dropdownmenu li ul li:hover > a{
color:$(tabs.selected.text.color);/*Change Text Color On Hover*/
background-color:$(tabs.selected.background.color);/*Change BG on Hover*/
border:0px;
text-decoration:none;
}


  • Now your drop down menu is ready.


Video Tute






Customise

To change the link in menu

Please replace # highlighted in code above with your own link.

Everything else can be changed in 'Template Designer'.

If you want to install advanced drop down menu then you can see this article:-

Make mega menu in blogger with image thumbnail drop down

Hope you enjoyed this article.

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

4 comments:

  1. Thank you for this explanation.
    However, how can I put the text ang pictures i had previously in "pages" created by blogger ?
    Many thanks
    https://eau-en-couleurs.blogspot.fr/

    ReplyDelete
    Replies
    1. Thanks for the comment.

      Please use the contact page so that I can understand your issue better. :)

      Delete
  2. Hello Rishabh

    I used this video and the content to sample your drop down menu.It worked perfectly except that under the main menu I can only see submenu1 and the rest of them are not to be seen.Am I missing something? kindly help.Thanks

    ReplyDelete
  3. Thank you for your explanation. I need to know more about how to change sub-menu to be smaller size than menu. I want to say thank again.

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.