Posted on November 13, 2008 - by webmaster
Jquery Vertical Slide (Dropdown) Navigation
I 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 made.
Tested in FF3, Opera 9, IE 6, Safari 3. Dependencies: Jquery & Optional Jquery Easing Plugin.
Javascript File
$(function(){
/**
* Jquery Horizontal Slide Navigation
* webmaster@chazzuka.com
* http://www.chazzuka.com
* Nov 13th 2008 @ Denpasar, Bali Paradise Island
**/
//@ active scroll
var _active = null;
//@ max expand in pixel
var _hmax = 80;
//@ min height in pixel
var _hmin = 0;
//@ loop through matches selector
$("ul#nav li a").each(function(){
//@ in/out handler
$(this).hover(
//@ hover
function(){
//@ child span expand
$(this).find('span').animate({height: _hmax+"px"}, {queue:false, duration:300, easing:'easeOutBack'});
//@ set active to current hovered
_active = $(this);
},
//@ out
function() {
//@ slide back
$(_active).find('span').animate({height: _hmin+"px"}, {queue:false, duration:300,easing:'easeInBack'});
}
);
});
});
CSS File
ul{ margin:0 10px; padding: 0; position:absolute; top:0; z-index:9; }
ul li{ padding: 0px; margin:0 1px 0 0; list-style:none; display:inline; float:left; }
ul li a{ display: inline-block; width: 150px; padding:0 0 5px 0; white-space:nowrap; text-align:center; text-decoration:none; color:#E4E4E4; text-transform:lowercase }
ul li a:hover { color:white; }
ul li a span { display:inline-block; height:0px; overflow:hidden; }
ul li a strong { font-size:14px; text-transform:uppercase; padding-top:5px; display:block;}
ul li a.blue { background: url(images/blue.png) bottom center no-repeat; }
ul li a.red { background: url(images/red.png) bottom center no-repeat; }
ul li a.orange { background: url(images/orange.png) bottom center no-repeat; }
ul li a.green { background: url(images/green.png) bottom center no-repeat; }
ul li a.black { background: url(images/black.png) bottom center no-repeat; }
HTML File
<ul id="nav">
<li><a href="#" class="blue"><span></span><strong>Bali Web Design</strong>Bali Web Design Services</a></li>
<li><a href="#" class="black"><span></span><strong>Web Services</strong>Design Development & SEO</a></li>
<li><a href="#" class="red"><span></span><strong>Web Developer</strong>Freelance Web Developer</a></li>
<li><a href="#" class="green"><span></span><strong>Web Portfolio</strong>Web Developer Portfolio</a></li>
<li><a href="#" class="orange"><span></span><strong>Web 2.0</strong>Web 2.0 Resources Blog</a></li>
</ul>
Visit My Website
November 14, 2008
Permalink
[...] Jquery Vertical Slide (Dropdown) Navigation Interesting style of top-bar navigation (tags: webdesign jquery javascript) « links for 2008-11-13 [...]
Visit My Website
November 19, 2008
Permalink
Nice work! That is an awesome use of a JQuery verticle drop down menu.
Visit My Website
November 20, 2008
Permalink
Hey. Your post has a wonderful visual appeal in it. I want to congratulate the designer who has designed this website. Very well-done .
Visit My Website
November 22, 2008
Permalink
I first want to congratulate the graphic designer of this site. You have done an excellent job man. I am really impressed with your sense of designing. Keep it up. All the best.
Visit My Website
November 24, 2008
Permalink
Hi. I am really impressed with your style of designing. The post has a wonderful visual appeal. Credit goes to the web designer. Good work man. Keep it up.
Visit My Website
December 3, 2008
Permalink
[...] 10- Jquery Vertical Slide (Dropdown) Navigation [...]
Visit My Website
December 10, 2008
Permalink
Thanks for this Jquery vertical slide. I’m going to see whether i can implement it myself. great site by the way!
Visit My Website
December 12, 2008
Permalink
Very cool! Thanks for the tutorial…
I want to modify it a bit – in the actual space that is generated by the drop down tab I’d like to include a list of navigation items. Is this possible? ANy idea how to do it?
Thanks!
Visit My Website
January 5, 2009
Permalink
hey this is a great piece of code. Is it possible to have it work the opposite way? inotherwords could the menus slide up from the bottom of the page?
Visit My Website
January 20, 2009
Permalink
[...] Vertical Dropdown Slide Navigation Menu in jQuery [...]
Visit My Website
March 17, 2009
Permalink
Hi,
Excellent tutorial, really clear and excellent design.
I am stuck in regards how to implement this to my current scenario.
I have a website with 12 products, 4 rows of three.
Each product will have a more info, where if clicked it will display some extra text.
Can’t get my head around how to carry this out with your example.
I don’t see a way of doing it and don’t want to create a new instance for each product,
Please could you point me in the right direction?
Here is a link to visualise what I am trying to achieve
http://www.jameshallamsme.co.uk/design_5/index.htm
Visit My Website
August 20, 2009
Permalink
just wondering if this menu could be used in a wordpress theme???
Visit My Website
October 12, 2009
Permalink
[...] Jquery Vertical Slide (Dropdown) Navigation [...]
Visit My Website
October 12, 2009
Permalink
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
Visit My Website
March 4, 2010
Permalink
oey!! vertical ko bare kina nalekhe ko!!!plz culd you write on the vertical slideing bar using jquery??
Visit My Website
March 12, 2010
Permalink
Very nice and useful tutorials for web designers,
Thanks for posting.
Visit My Website
March 25, 2010
Permalink
[...] Jquery вертикальное слайд меню | Демо версия [...]
Visit My Website
April 2, 2010
Permalink
How many items I can add to it ?
Visit My Website
April 6, 2010
Permalink
Nice workaround, very usefull for me, thanks for the article man.
Visit My Website
June 22, 2010
Permalink
[...] Jquery Vertical Slide (Dropdown) Navigation [...]