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.

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:-

This is very easy to install menu
It looks beautiful on a blog
The many categories can hold many topics or simply posts
Customization can be done in template designer so no headache of changing codes and all
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.

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.

4 comments:

Jane9 December 2016 at 18:27
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/
Ruh7 April 2019 at 03:39
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
Visoth Sum8 July 2020 at 08:30
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.

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

Tutes Inside

Make Drop Down Menu In Blogger

Video Tute

sdzdsds

4 comments:

Popular Posts