CSS Drop Down Menu For Blogger

Are you bored with your old drop down menu? Try this rounded edge professional blue css drop down menu for Blogger. Recently Trickiezone posted a tutorial about jquery dropdown menu that using a jquery plugin that helps to menu works well, but in this css drop down menu, it’s easy to install in Blogger blog, no need to apply any jquery plugin.

CSS Drop Down Menu For Blogger

Live Demo

How To Add CSS Drop Down Menu In Blogger?

  • Login to your Blogger account.
  • From your dashboard, go to your blog Template section.
  • Backup your template, click button at the upper right side.
  • When it’s done! Click

Adding CSS Code:

    • Press Ctrl+F and search

]]></b:skin>

    • Copy the code below and paste it before

]]></b:skin>

  • And hit

Code:

/* Blue Dropdown Menu Start (www.trickiezones.com) */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(http://1.bp.blogspot.com/-i-BUgDv9Y4U/UUmLeCtew_I/AAAAAAAADCs/SeezRdOQch4/s320/bg-trickiezone.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(http://1.bp.blogspot.com/-i-BUgDv9Y4U/UUmLeCtew_I/AAAAAAAADCs/SeezRdOQch4/s320/bg-trickiezone.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(http://1.bp.blogspot.com/-i-BUgDv9Y4U/UUmLeCtew_I/AAAAAAAADCs/SeezRdOQch4/s320/bg-trickiezone.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(http://1.bp.blogspot.com/-i-BUgDv9Y4U/UUmLeCtew_I/AAAAAAAADCs/SeezRdOQch4/s320/bg-trickiezone.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
/* Blue Dropdown Menu End (www.trickiezones.com) */

Adding Menu Code:

  • Go to your blog Layout section.
  • Click Add a Gadget, the menu widget location must be just like the screenshot below.

  • After that find HTML/JavaScript, copy the code below and and paste it in content area (no need to add title).
  • Save and you’re done!

Code:

<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Tutorials</a>
<ul>
<li><a href=”#”>HTML / CSS</a></li>
<li><a href=”#”>JS / jQuery</a>
<ul>
<li><a href=”#”>jQuery</a></li>
<li><a href=”#”>JS</a></li>
</ul>
</li>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>MySQL</a></li>
<li><a href=”#”>XSLT</a></li>
<li><a href=”#”>Ajax</a></li>
</ul>
</li>
<li><a href=”#”>Resources</a>
<ul>
<li><a href=”#”>By category</a>
<ul>
<li><a href=”#”>PHP</a></li>
<li><a href=”#”>MySQL</a></li>
<li><a href=”#”>XSLT</a></li>
<li><a href=”#”>Ajax</a></li>
</ul>
</li>
<li><a href=”#”>By tag name</a>
<ul>
<li><a href=”#”>captcha</a></li>
<li><a href=”#”>gallery</a></li>
<li><a href=”#”>animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#”>About</a></li>
<li><a href=”http://www.trickiezones.com”>FAQ’s</a></li>
</ul>

Confused? Feel free to ask! Subscribe us! if you found this article useful or Like us on Facebook to receive free updates.

  • http://www.blogger.com/profile/15942258095045680377 Rajon Ahmed

    tnx admin good post