Nested jquery dropdown list

By Korvin on Mar 05, 2010

A much nicer version of my dropdown script, styled version can be seen at http://left4quake.com/maupin for a limited period of time as it is an assignment.
minimum css:

.item {height:0px;}
.drop {float:left;}

example:

<div class='drop'>List 1
    <a href=# class='item'>Item 1</a>
    <a href=# class='item'>Item 2</a>
    <a href=# class='item'>Item 3</a>
</div>
<div class='drop'>List 2
    <a href=# class='item'>Item 1</a>
    <a href=# class='item'>Item 2</a>
    <a href=# class='item'>Item 3</a>
</div>
<div class='drop'>List 3
    <a href=# class='item'>Item 1</a>
    <a href=# class='item'>Item 2</a>
    <a href=# class='item'>Item 3</a>
</div>
<div class='drop'>List 4
    <a href=# class='item'>Item 1</a>
    <a href=# class='item'>Item 2</a>
    <a href=# class='item'>Item 3</a>
</div>

it is crucial that you include the newest version of jquery at the beginning of your file, and have this code after the drop lists are stated.

$('.item').hide();
$('.drop').hover(function(){jQuery('.item',this).animate({'height':'20px','opacity':1},200);},function() {jQuery('.item',this).animate({'height':'0px','opacity':0},200);});

Comments

Sign in to comment.
Hawkee   -  Mar 07, 2010

Excellent. I'm working on a new screenshot uploader, so it'll be much easier to add any number of screenshots.

 Respond  
sunslayer   -  Mar 07, 2010

looks cool

 Respond  
Korvin   -  Mar 07, 2010

done =]

 Respond  
Hawkee   -  Mar 06, 2010

Neat, a screenshot would be nice though.

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.