Submit your widget

Jquery Horizontal Slide Navigation

Created 14 years ago   Views 15403   downloads 3270    Author n/a
Jquery Horizontal Slide Navigation
View DemoDownload
113
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'});
   });
    });
});