CODEWITHSUNDEEP
jquerydrop-down-menubindmouseentermouseleave
lyndonr
lyndonr

Reputation: 15

Jquery drop down working ok... but could be better

here's my working drop down menu...

http://jsfiddle.net/NAyWQ/7/

it does the job, and it's pretty much all the functionality I need at the moment... however I feel like it could be optimized a bit. namely, is there a way I can do this without the boundary div? also, the drop down re-fires if I go back up into the menu, not a big deal, but it would be nice to prevent this behavior.

any suggestions/tweaks would be greatly appreciated.

Upvotes: 0

Views: 64

Answers (3)

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

The jsfiddle you have is a little messy and not very expandable. I would suggest using "ul" instead of "div"s because its cleaner and you can do more things with CSS. Also, I would refrain from using too many IDs as this means you have to always manually update them.

Here is an example I put together. This method also has support for nested dropdowns (if you wanted them).

http://jsfiddle.net/EYv9g/4/

You'll see ">" in the CSS. This is a really powerful selector that allows you to apply styles to an element that is a direct child of the parent, but not elements farther down

For example:

ul.menu > li {background: yellow}

would apply to...

<ul class="menu">
    <li>me
        <ul>
            <li>but NOT me</li>
        </ul>
    <li><a>me</a>
<ul>

Upvotes: 0

mildog8
mildog8

Reputation: 2154

try something like this - http://jsfiddle.net/NAyWQ/11/.

here is the jquery it uses no boundry div.

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219938

Working off of @AndrewMilson's example, you can do this:

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

Here it is in your fiddle: http://jsfiddle.net/NAyWQ/11/

Upvotes: 1

Related Questions