Home » Blogger gadget » How to make stylish drop down menu bar for blogger 2013

Last week  many blogger user’s asked me that that How to make stylish drop down menu bar for blogger & they need stylish and attractive as well as SEO friendly, So I have find solution for you check that demo 1st so you will satisfied with this stylish drop down menu bar.

DEMO

Blogger doesn’t have any drop down menu feature is you are don’t you that kind of templates so we will give you free stylish drop down menu with mouseover effect. You can easily add this stylish drop down in the blogger & this stylish drop down menu has fast loading speed(you doesn’t need to add JavaScript for that )

So let’s simple tutorial for How to make stylish drop down menu bar for blogger in 2013?

Step 1:  Adding drop down menu bar in blogger template.

Login to your blogger account and go to Template–>add gadget–> choose HTML/JavaScript.

Step 2:Copy & paste code of stylish drop down menu bar.

Copy and paste below code into HTML/JavaScript box & save the template.

<style>
#mymenu, #mymenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mymenu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-meoz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#mymenu:before,
#mymenu:after {
content: “”;
display: table;
}


#mymenu:after {
clear: both;
}
#mymenu {
zoom:1;
}
#mymenu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mymenu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mymenu li:hover > a {
color: #fafafa;
}
*html #mymenu li a:hover { /* IE6 only */
color: #fafafa;
}
#mymenu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mymenu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mymenu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#mymenu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#mymenu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mymenu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mymenu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mymenu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mymenu ul li:first-child > a:after {
content: ”;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mymenu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mymenu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mymenu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mymenu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div id=”mymenu”>
<li><a href=”#”>Main</a></li>
<li>
<a href=” # “>Services</a>
<ul>
<li><a href=” # “>SEO</a></li>
<li><a href=” # “>Marketing</a></li>
<li><a href=” # “>Development tools</a></li>
<li><a href=” # “>Web design</a></li>
</ul>
</li>
<li><a href=” #”>Work</a></li>
<li><a href=” #”>About</a></li>
<li><a href=” # “>Contact</a></li>
</div>

replace your link with # & use your name for drop down menu bars

our search result

drop down menu for blogger

menu bar for blogger

mouse hover effect for blogger

blogger gadgets

Leave a Reply