Posted on October 13, 2008 - by webmaster
Horizontal Slide Nav Using Jquery & CSS
Once i want to create icon based navigation with few lines text on it, but rather than to use tooltips i prefer to have show/hide effects, to hide the text and show it on mouse hover, and here is the result, like the effects? well just copy paste the snipet below, and you could customize it to match your taste and needs.
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(){
/*
Jquery Horizontal Slide Navigation
webmaster@chazzuka.com
http://www.chazzuka.com
October 8th 2008 @ Denpasar, Bali Paradise Island
*/
$("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(){
/*
Jquery Horizontal Slide Navigation
webmaster@chazzuka.com
http://www.chazzuka.com
October 8th 2008 @ Denpasar, Bali Paradise Island
*/
$("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'});
});
});
});
16 Comments
We'd love to hear yours!
Leave a Comment
Here's your chance to speak.
-
Most Popular Posts
Visit My Website
October 13, 2008
Permalink
[...] Horizontal Slide Nav Using Jquery & CSS [...]
Visit My Website
October 23, 2008
Permalink
I tried to write a jquery code to do this myself, and it looked great until I previewed it in Safari browser. Your works better, but doesn’t look right. The boxes in your demo aren’t all lined up nice and pretty.
Visit My Website
October 31, 2008
Permalink
Very good
I was looking it for 1 year !
Thanks
Visit My Website
October 31, 2008
Permalink
Hi again ;
Could you please tell me how can I make this “Horizontal Slide Nav” width static (without any change) ? I mean on mouse over , images move on each other to remain slide nav width fixed .
Thanks
Visit My Website
November 6, 2008
Permalink
Thanks a lot, I was looking for this. It works nice. Thanks
Visit My Website
November 13, 2008
Permalink
[...] have sometimes today to play around with jquery horizontal slide navigation (horizontal accordion navigation) (demo), I want to make it slide vertically, and here is what i have [...]
Visit My Website
December 15, 2008
Permalink
Wow, this is an awesome effect! What’s more impressive is the few lines of code that run it (well, after you have JQuery and the easing plugin of course). Very slick effect. Thanks for sharing!
Visit My Website
January 14, 2009
Permalink
Is it possible to have the first option default to open?
Visit My Website
January 16, 2009
Permalink
Also, is it possible to have a link inside where the text is? right now it breaks the block area.
Visit My Website
April 9, 2009
Permalink
[...] 40. Horizontal Slide Nav Using jQuery & CSS [...]
Visit My Website
September 4, 2009
Permalink
where is the demo?
Visit My Website
September 17, 2009
Permalink
This is a great effect. I want to include it in my portfolio site. However, it’s not W3 validated. Any thoughts on how to debug it?
Visit My Website
October 3, 2009
Permalink
[...] 40. Horizontal Slide Nav Using jQuery & CSS [...]
Visit My Website
December 4, 2009
Permalink
[...] Horizontal Slide Nav Using jQuery & CSS [...]
Visit My Website
December 9, 2009
Permalink
a demo would be great!
That way we can assess the WC3 and compatibility issues without having to recreate your work.
Then we can give you tips, and then you can implement them, and then you look like (more of) a rock star.
cheers!
Visit My Website
January 11, 2010
Permalink
[...] 40. Horizontal Slide Nav Using jQuery & CSS [...]