Sunday, June 3, 2012

Add CSS3 Drop Down Menu Without Any Scripts and Images To Blogger

Author: Gagan Masoun
Add CSS3 Drop Down Menu Without Any Scripts and Images To Blogger
Wanna more attractive look of your blog? Drop down menu helps you to increases your blog look.Visitors can easily navigate through your blog. Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. This is one of my favorite drop down menu. Let’s see how is made:

This excellent menu is created by Catalin Rosu without using any images or scripts, only minimal HTML markup and CSS3 used.

CSS3 Drop Down Menu Screenshot

CSS3 Drop Down Menu Live Demo

How To Add CSS3 Drop Down Menu In Blogger Blog

  • Go to Blogger Dashboard --> Layout --> Add A Gadget --> HTML/JAVASCRIPT
  • Now Paste The Code Shown Below Inside It
<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>


  • Replace The Bolded Text With Your Page Titles and Replace The Hash Sign (#) With Respective URL's. 
  • Now Save Your Template & Its Done..!!

5 comments:

  1. Menu gadget is working but It's drop down is not working !!!

    ReplyDelete
    Replies
    1. Here, Code is working fine, you should apply the code carefully...

      Have you seen any error??

      Delete
    2. I applied simple template by blogger does it work on that template?

      Delete
  2. how to create as sub menu(sub in sbu menu) like menu1 > sub menu 1.1 > sub menu 1.1.1

    ReplyDelete
    Replies
    1. Hey ace,

      In above tutorial find ul id="menu" and below this you will see how to replace your links with menu1 > sub menu 1.1 and so on...

      Thanks

      Delete