Sunday, January 13, 2013

Css3 Smooth Drop Down Menu Bar For Blogger

In this post im gonna   explain how to add  smooth Css   menu for  your   blogger.  Actually this looks
really great. its act like jquery  menu.Im just using Css3 and HTML for this menu bar, Check  it  from below  link. you  can get  it.You  can  get my  all  menubar here
Css3+Smooth+Drop+Down+Menu+Bar+For+Blogger

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
.navblogtrix,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    height:50px;
}

.navblogtrix {
    position:relative;
}

.navblogtrix ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}

.navblogtrix li {
    float:left;
    position:relative;
    list-style: none;
}

.navblogtrix li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#7770B4;
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:35px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
}

.navblogtrix li:hover > a {
    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;
}

.navblogtrix li:hover ul.subs {
    height:auto;
    width:180px;
}

.navblogtrix ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    list-style: none;
}

.navblogtrix li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    list-style: none;
}

.navblogtrix li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}

.navblogtrix ul li a {
    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

.navblogtrix li:hover ul li a {
    line-height:35px;
}

.navblogtrix ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul class="navblogtrix">
<li><a href="http://www.bloggertrix.com/">Home</a></li>
<li><a href="http://www.bloggertrix.com/">Tutorials</a>
            <ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></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>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
            <ul class="subs">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
            <ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Live</a></li>
<li><a href="#">Branches</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>

Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...

10 comments:

  1. its great but dont you think that it can be more easy with jquery??

    ReplyDelete
    Replies
    1. Yes.it is. But i want to show,this effect work with css3 too.

      Delete
  2. tHE Code didn't work..

    ReplyDelete
  3. It Works But there is huge space between Menu bar and posts Help me please
    website: www.allnewtask.tk

    ReplyDelete
  4. I have new problem dude The Drop down menu cutted off I mean The drop menu hide by the first post Help Me please-www.allnewtask.tk

    ReplyDelete
  5. Please Help me dude It works But drop down menu is hide by the first post help me please

    ReplyDelete
  6. thanks for the trick, very useful

    ReplyDelete