Submit your widget

Jquery Horizontal Slide Navigation

Created 11 years ago   Views 14360   downloads 2544    Author n/a
Jquery Horizontal Slide Navigation
View DemoDownload
110
Share |

This is a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.

HTML Structures

 

 

<ul>
    <li><a href="#" title="" class="home"><p><strong>Title</strong><br />Detail</p></a></li>
    <li><a href="#" title="" class="blog"><p><strong>Title</strong><br />Detail</p></a></li>
    <li><a href="#" title="" class="services"><p><strong>Title</strong><br />Detail</p></a></li>
    <li><a href="#" title="" class="portfolio"><p><strong>Title</strong><br />Detail</p></a></li>
</ul>

 

 

Stylesheet

 

 

body{
 font:italic 0.8em/0.8em Georgia, "Times New Roman", Times, serif;
 color:#999; padding:50px;
 text-align:center;
 background:white;
}
ul{
 list-style: none;
 margin:10px 0px;
 padding: 0;
}
ul li{
 padding: 0px;
 margin:0 2px 0 0;
 list-style:none;
 display:inline;
}
ul li a{
 display: inline-block!important;
 overflow: hidden;
 height: 90px;
 line-height:90px;
 width: 128px;
 white-space:nowrap;
 text-align:left;
}
ul li a p {
 padding:0 0 0 135px;
 line-height:normal;
}
ul li a p strong {
 font-size:24px;
 color:#336600;
}
ul li a.home {
 background:url(images/chazzuka.jpg) top left no-repeat;
}
ul li a.blog {
 background:url(images/blog.jpg) top left no-repeat;
}
ul li a.services {
 background:url(images/services.jpg) top left no-repeat;
}
ul li a.portfolio {
 background:url(images/portfolio.jpg) top left no-repeat;
}

 

 

Javascript

 

 

$(function(){
 /*
  
 */
    $("ul li a").each(function(){
 $(this).hover(function(){
  $(this).animate({width: "400px"}, {queue:false, duration:450});
      },function() {
    $(this).animate({width: "128px"}, {queue:false, duration:450});
   });
    });
});

 

 

Ofcourse you need to load jquery library before javascript block above, and you can have easing effect on it as well, for that you need to load jquery easing plugin before the javascript block, to have the easing effects you need to change the javascript block as below:

$(function(){

    $("ul li a").each(function(){
 $(this).hover(function(){
  $(this).animate({width: "400px"}, {queue:false, duration:450,easing:'easing_on_mousein'});
      },function() {
    $(this).animate({width: "128px"}, {queue:false, duration:450,easing:'easing_on_mouseout'});
   });
    });
});