Saturday, 8 September 2012

Amazing jQuery Slide Out Navigation For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

I personally love this slide out jquery menu and i think after adding this you'll love it too. It's a good way to display your site's menu if you're using a template which doesn't suit any other menus. It's simple , cool and smooth and i think you should give it a try :

Installation :
  • Go To Blogger > Template > Edit HTML > Search for </head> :
  • Just above  </head>  paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

  • Now search for ]]></b:skin> and just above it paste following CSS : 

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;    
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjuiL5gWfxjmGmgEw9mYdmWyBa-7F7y2C4jcmdFH92JTgM65W2j3jVoOkoYP6IzlRKHwzJ9IUzOklawHqW6WDelygLGx-eoKjLBgXfx2SAsXvED3dxE5C_hbcMOKFZG0CANNKdUGVhnLw/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNalF2UT31LXKl4_Cm52rBru5bcYixDAsb2t38YrQpdZbA9axfBPU3MkBNmQpq44hA3VhCQqIkSwN6vT9cQwPbZBUdmNFs4EOThzptToUjz0ad4cF8Z92zM0yhSHlutRMsYhJDH6SLlk/s1600/id_card.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_1Nl-RA7wVGmFA4-PHZohMPYuOVA8Sg9Gm_M1mUcaDxAaHB9Gu55qrb57aghtGeBlBkV-dJOW6flmjbwbgQhyphenhyphenXsK-4LpKbfAcJNn34N7CzHnxWtT_vVSaMAuFgbyqOMBFc-eYDYUn9E/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtP0-H9JFEtyHWmgxt5wYMNyeSjumO1u-Y52rbapHR6uEQYyH6TkhZCp8dwFZ-AljdzU5Q6QOY3TyUg_u6EvxicOul2LDHASlAwZsyO0c0E-ZlZ33PcWdmqt0oBGOKhmRA8aZZxTl7Eo/s1600/news.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDF97Mm7IYX5nYoqG1e8iZCoRw6FrsrKt7OFvx1Bk0rzDStdPtPD10Y5-HuDDzno2Yep4qNj5kOe72xI3QPzigFmofl7jz5G6DkFVzzNPO4Sjzh6YiL7z2RoifPyBUsJvnxnZM67Zxx_E/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoo2JwYGPLo2PvvgRk1f4sEdWzt8IDcUGSDsCaGYaZucMjPkkVwzn7df5298kArt2v2krthzenkRUC1HxgAeEodNaLbcSOQstMWWuuKq_GKjja0YY1pxc7oRSgLAR9xAqQLAYfBt4744s/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQKBNF3gSSQts67YHwcmiNkSnNamYNyX99KtC0NmPijTdcd-9y9LiP1R-ztKmtPSN6wl7NhVNg9b2qKG_3lizfvHzr68mAS5_ic63RrJeUykRqrK5b8v1YQ7g2zCR-qo5OeFJz6UFpgOw/s1600/mail.png);
}

  • Save your template
  • Now Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="podcasts"><a href="#"><span>Newsletter</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>

Customization :


  • Replace all # with your links and see it in action.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.