» » » How to add Stylish Horizontal Drop down Menu for Blogs?

How to add Stylish Horizontal Drop down Menu for Blogs?

,
Whenever visitor/readers land on any blog/website they browse for more categories or useful information via Menus or Tab Menus or Links widgets. Menu plays vital role for connecting all the content items in single widget make visitors/readers get very easily. Here, BlogTariff presents a wonderful simple �Horizontal Drop Down Menu� for blogs/websites in different style. This menu is based on HTML and CSS styles with hover effect. Webmaster don�t need to work hard for adding this Menu, easy customizable with combination of different style. Let�s begin the tutorials for Menu.

How to Add Horizontal Drop down Menu for blogger?

Step 1:-
Sign into your blogger account
Click on �Design (Layout in the new blogger interface) Page elements� link tab
Click on �Add a Gadget� and select �HTML/Javascript� widget for adding code
Copy the below code and paste in it
<div id='navigbar'>
<ul id='navig'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>

Customization:-

Replace �#� tags with your category links or pages and replace �# 123�� with your sub-category items as highlighted in color �RED�
If you want to add more links then follow the code below
<li>
<a href='#'>Your Tab Name</a>
</li>

  • After successful adding the above code now �Save the widget� and your Template
Step 2:-
Now click on �EDIT HTML� link tab
Search for code
]]></b:skin>
After finding code copy the below code and paste above to it

/*----- BlogTariff Code starts for Drop Down Menu ----*/

#navigbar {
background: #646464;
width: 100%px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
height:35px;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

}

#navig {
margin: 0;
padding: 0;
}
#navig ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#navig li {
list-style: none;
margin: 0;
padding: 0;
height:35px;

}
#navig li a, #navig li a:link, #navig li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;


}
#navig li a:hover, #navig li a:active {
background: #BEBEBE;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

}
#navig li {
float: left;
padding: 0;

}
#navig li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition-duration:all .1s ease-in-out;transition:all .1s ease-in-out;
}
#navig li ul a {
width: 140px;

}
#navig li ul ul {
margin: -25px 0 0 161px;
}
#navig li:hover ul ul, #navig li:hover ul ul ul, #navig li.sfhover ul ul, #navig li.sfhover ul ul ul {
left: -999em;

}
#navig li:hover ul, #navig li li:hover ul, #navig li li li:hover ul, #navig li.sfhover ul, #navig li li.sfhover ul, #navig li li li.sfhover ul {
left: auto;
}
#navig li:hover, #navig li.sfhover {
position: static;
}
#navig li li a, #navig li li a:link, #navig li li a:visited {
background: #BEBEBE;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-top:1px dotted #333;
border-bottom:1px dotted #333;


}
#navig li li a:hover, #navig li li a:active {
background: #787878;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .6s ease-in-out;
}
/*----- BlogTariff Code Ends for Drop Down Menu ----*/

Customization:-

Change menu�s background �#646464; or tab background �#BEBEBE� or Drop down menu background �BEBEBE� or hover color of drop down menu �#787878� and replace it with your own choice color then use our Color Chart

After successful customization of the above code now, �Save your template� to view your experiment.