Add CSS3 Drop Down Menu In To Blogger Blog | browse your blog

Tuesday 2 October 2012

Add CSS3 Drop Down Menu In To Blogger Blog

Add CSS3 Drop Down Menu In To Blogger Blog

CSS3 dropdown menu makes the blogger blog more attractive. This dropdown menu helps your reader to negative through your blog. This dropdown menu have awesome mouse hovering effect. I personally like this dropdown menu.

Just follow the simple steps to install dropdown menu

1. login into your blogger blog.
2. Go to layout
3. click on add HTML/JAVASCRIPT
4. Now paste the following code in the HTML/JAVASCRIPT widget.

<style> 
#menu 
{ 
width: 100%; 
margin: 0; 
padding: 10px 0 0 0; 
list-style: none;  
background: #111; 
background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
background: -webkit-linear-gradient(#444, #111); 
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111); 
background: linear-gradient(#444, #111); 
-moz-border-radius: 50px; 
border-radius: 50px; 
-moz-box-shadow: 0 2px 1px #9c9c9c; 
-webkit-box-shadow: 0 2px 1px #9c9c9c; 
box-shadow: 0 2px 1px #9c9c9c; 
} 
#menu li 
{ 
float: left; 
padding: 0 0 10px 0; 
position: relative; 
line-height: 0; 
} 
#menu a 
{ 
float: left; 
height: 25px; 
padding: 0 25px; 
color: #999; 
text-transform: uppercase; 
font: bold 12px/25px Arial, Helvetica; 
text-decoration: none; 
text-shadow: 0 1px 0 #000; 
} 
#menu li:hover > a 
{ 
color: #fafafa; 
} 
*html #menu li a:hover /* IE6 */ 
{ 
color: #fafafa; 
} 
#menu li:hover > ul 
{ 
display: block; 
} 
#menu ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0;    
    display: none; 
    position: absolute; 
    top: 35px; 
    left: 0; 
    z-index: 99999;    
    background: #444; 
    background: -moz-linear-gradient(#444, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
    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 0 2px rgba(255,255,255,.5); 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
    box-shadow: 0 0 2px rgba(255,255,255,.5); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
#menu ul ul 
{ 
  top: 0; 
  left: 150px; 
} 
#menu ul li 
{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
} 
#menu ul li:last-child 
{   
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;    
} 
#menu ul a 
{    
    padding: 10px; 
height: 10px; 
width: 130px; 
height: auto; 
    line-height: 1; 
    display: block; 
    white-space: nowrap; 
    float: none; 
text-transform: none; 
} 
*html #menu ul a /* IE6 */ 
{    
height: 10px; 
} 
*:first-child+html #menu ul a /* IE7 */ 
{    
height: 10px; 
} 
#menu ul a:hover 
{ 
    background: #0186ba; 
background: -moz-linear-gradient(#04acec,  #0186ba); 
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
background: -webkit-linear-gradient(#04acec,  #0186ba); 
background: -o-linear-gradient(#04acec,  #0186ba); 
background: -ms-linear-gradient(#04acec,  #0186ba); 
background: linear-gradient(#04acec,  #0186ba); 
} 
#menu ul li:first-child > a 
{ 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 
#menu ul li:first-child > a:after 
{ 
    content: ''; 
    position: absolute; 
    left: 30px; 
    top: -8px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid #444; 
} 
#menu ul ul li:first-child a:after 
{ 
    left: -8px; 
    top: 12px; 
    width: 0; 
    height: 0; 
    border-left: 0; 
    border-bottom: 5px solid transparent; 
    border-top: 5px solid transparent; 
    border-right: 8px solid #444; 
} 
#menu ul li:first-child a:hover:after 
{ 
    border-bottom-color: #04acec; 
} 
#menu ul ul li:first-child a:hover:after 
{ 
    border-right-color: #04acec; 
    border-bottom-color: transparent;  
} 
#menu ul li:last-child > a 
{ 
    -moz-border-radius: 0 0 5px 5px; 
    border-radius: 0 0 5px 5px; 
} 
#menu:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
* html #menu             { zoom: 1; } /* IE6 */ 
*:first-child+html #menu { zoom: 1; } /* IE7 */ 
</style> 
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a> 
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</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>
</ul>

5. And save the widget and you have done !

Tags : adsense Blogger Drop-Down Menu Meta Tag Sharing Widgets Widget

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)