CODEWITHSUNDEEP
jquerycssjquery-ui
Akhil Paul
Akhil Paul

Reputation: 721

JQuery drop down menu issue

Before reading the description please take a look at the drop down menu which I created in JSfiddle

http://jsfiddle.net/akhilpaul/bKxXZ/

I have a JQuery drop down menu which I taken from a tutorial :) and it works great like animate the dropdown function smoothly. The problem is the animation(drop down) when I mouseover the down arrow(now red color) on the right side of the menu but this is not I'm looking actually I need to animate the drop down when I mouseover the menu(Our Services and Locations). And I made slight updates on the JQuery but that dosen't work.. What I extra added to the Jquery is

added a class(.drop) to the particular li that having drop downs and commented the span function like this

 //$("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li.drop").mouseover(function() {


<li class="drop">
        <a href="#">Our Services</a>
        <ul class="subnav">
            <li><a href="#">Contract</a></li>
            <li><a href="#">Sketch</a></li>
            <li><a href="#">Implementation</a></li>
        </ul>
</li>

Although I try to keep the hover effect of the drop down menu as visible when we move the cursor to drop down menu..

but both functions aren't working!

Looking forward to your replies on this question

Thanks

Paul

Upvotes: 0

Views: 880

Answers (3)

gilly3
gilly3

Reputation: 91497

You're code can be condensed to just this:

$(function() {
    $("ul.topnav li:has(.subnav)").hover(function() {
        $("ul.subnav", this).slideDown('fast').show();
    }, function() {
        $("ul.subnav", this).slideUp('slow');
    });
});

http://jsfiddle.net/bKxXZ/13/

Here's what changed:

  1. Change your .mouseover() selector from selecting the span to selecting any li that has a subnav.
  2. Change your selectors from $(this).parent() to just $(this) since our selector now points at what was the parent.
  3. Remove the trigger span code, you don't need it now.
  4. Remove the trigger span .hover() code.
  5. Change .mouseover() to .hover() and combine it with the existing .hover(), since they both apply to the same element.

Upvotes: 1

jli
jli

Reputation: 6623

Just change one line:

$("ul.topnav li span").mouseover(function() { ...

Should be:

$("ul.topnav li a").mouseover(function() {

See: http://jsfiddle.net/h5S3c/1/

I just updated it to fix the red/green bars to the right.

Upvotes: 1

Jose Vega
Jose Vega

Reputation: 10258

Check out this updated fiddle: http://jsfiddle.net/ecy7Q/

I basically changed the 

$("ul.topnav li span").mouseover

into

$("ul.topnav li").mouseover

and remove the .parent() from the code that followed.

Upvotes: 0

Related Questions