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>
Posted at November 13, 2008 in Downloads has 26 Comments and tagged as CSS, Downloads, jQuery, Tutorial, Web 2.0
Demo link doesn’t work. :/
Hey Its Pretty Cool …using a small CSS Width chage would help out me in presenting a Jquery drop down slide Bar..
Thanks
Phani
Mindtree
Hyderabad.
hi i am not able to understand when i am using the code in jquery..
this is my jquery code for dropdown i need to add a slide bar .pls tel me
// Country dropdown
$(‘#divCountry’).hover(function ()
{
$(this).toggleClass(‘hover’);
$(‘#divCountry’).removeClass(‘clicked’);
});
$(‘#divCountry li’).click(function ()
{
var currentSelected = $(this).attr(‘class’);
if (currentSelected != “current-industry”) {
$(‘#divCountry li’).css(“background-color”, “#fff”);
$(this).removeClass(‘hover’).css(“background-color”, “rgb(141, 187, 64)”);
}
var currentSelected = $(this).attr(‘class’);
$(‘#divCountry li.current-industry’).html($(this).html());
$(‘#hdnCountry’).val($(this).html());
$(‘#divCountry’).addClass(‘clicked’);
ValidateCompanyInfo(‘selection’);
});
Its awesome.It solve my problem.
Thanks.
Thanks good article
Nice workaround, very usefull for me, thanks for the article man.
How many items I can add to it ?
Very nice and useful tutorials for web designers,
Thanks for posting.
oey!! vertical ko bare kina nalekhe ko!!!plz culd you write on the vertical slideing bar using jquery??
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/
just wondering if this menu could be used in a wordpress theme???
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
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?
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!
Thanks for this Jquery vertical slide. I’m going to see whether i can implement it myself. great site by the way!
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.
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.
Hey. Your post has a wonderful visual appeal in it. I want to congratulate the designer who has designed this website. Very well-done .
Nice work! That is an awesome use of a JQuery verticle drop down menu.