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'});
});
});
});
Posted at October 13, 2008 in Downloads has 44 Comments and tagged as CSS, Downloads, jQuery, Tutorial, Web 2.0
so cool, just i want.
thanks!
I have other lists on my website and the javascript is causing those lists to move around too… Is there a way to restrict this effect to only one list? I gave each list a different class and id but I can’t figure out how to manipulate the scripting to only effect one list and not the other.
Thanks
hi. i was actually looking for a navigation much like the you have on top. the one with the red box that slides left and right. do you have a tutorial on that?
Thank you so much
Hello!
please see that ( i use chrome 13 now) there is little problem in Your css style :
add class “last” to last thing in slider (portfolio),
and add this in Your css file:
.last {
top: -17px;
position: relative;
}
Best from Poland! @FelixFett
Excellent script! love it.
if my menu items more than 10 means…
Hello,
I have created and shared a JQuery Horizontal Slider.
Check it out http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/
Let me know if you like it.
Thanks.
Hello,
First of all, thanks for your nice tuto, it is really great !
For people who doesn’t see the demo :
http://developer.web.id/jquery/horizontal-slide-nav/
there it is! linked on “here is the result”
the tuto is working, but I have a problem :
I would like to add link on text like “detail”
but the nav horizontal tun into vertical nav ….and all is broken…
I hope you understand my english, can someone help me please?
I find it fascinating how many people have posed the question about horizontal slide effect in jquery WITHOUT the use of a so called plugin…. after studying the .animate methods.. it IS possible but im not contributing what ive learned because some of the users here want to include other people’s work into their own portfolio… that seems asinine to me. Portfolios are supposed to showcase YOUR WORK, not someone elses.
I’d like to see a demo…. Where it is?
Nice tutorial but is there any demo for this?
Awesome effects. I really like this and implement it to my portfolio pages. Do there any license or I can put a credit line for you. Please reply.
Yes, a demo is better for this great tutorial
great slider, works pretty well, if you can use some tag for it will be usefull for visitors
, regards
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!
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?
where is the demo?
Also, is it possible to have a link inside where the text is? right now it breaks the block area.
Is it possible to have the first option default to open?
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!
Thanks a lot, I was looking for this. It works nice. Thanks
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
Very good
I was looking it for 1 year !
Thanks
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.