CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Julez
Julez

Reputation: 1369

Drop down menu almost works, but not perfecly

I made a login drop down menu but sometimes it slides 2 times. i cant find the problem maby some of you guys know the issue.

here is my code:

Jquery:

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250); 
});

$("#drop_down").mouseleave(function() {
    $(this).slideUp(250); 
});

HTML:

<div id="login_area">
    <p class="login_trigger">Login
        <div id="drop_down">
            <form id="" name="" method="post">
                <input type="text" name="username" class="username" /><br />
                <input type="password" name="password" class="password" /><br />
                <input type="submit" name="submit" class="button" value="Login" />
            </form>
        </div>
    </p>
</div>

CSS:

div#login_area p.login_trigger {
display:block;
padding:6px;
background-color:#e2e2e2;
color:#4a4a4a;
-webkit-border-radius:5px;
border-radius:5px;
z-index:99;

}

div#login_area div#drop_down {
position:absolute;
right:20px;
top:40px;
background-color:#e2e2e2;
border:1px solid #e2e2e2;
padding:10px;
-webkit-border-radius: 4px 0px 4px 4px;
border-radius: 4px 0px 4px 4px;
z-index:9;

}

Upvotes: 0

Views: 75

Answers (3)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

try the following code:

JS 

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250); 
});

$("p.login_trigger").mouseleave(function() {
    $("#drop_down").slideUp(250); 
});

Make following change in css : 

div#login_area div#drop_down {
    top:47px;    
}

HERE IS JSFIDDLE DEMO

Upvotes: 0

veritasetratio
veritasetratio

Reputation: 611

Here is alternative which tracks the state of the login div. The object here is to change behavior based upon completed state transitions. This is accomplished via:

  1. Using addClass,hasClass and removeClass to identify the state of the div.
  2. Using the callback functions of slideDown and slideUp to update the state.

With the state covered the mouseleave is conditional upon hasClass("dropped") being true.

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").slideDown(250, function() { $(this).addClass( "dropped" ); } ); 
});

$("#drop_down").mouseleave(function() {
    if ($(this).hasClass("dropped"))
        $(this).slideUp(250, function() { $(this).removeClass("dropped") }); 
});

Working fiddle

Upvotes: 1

Oleg Novosad
Oleg Novosad

Reputation: 2421

Insert .stop() method before sliding:

$("div#drop_down").hide();

$("p.login_trigger").mouseenter(function() {
    $("#drop_down").stop().slideDown(250); 
});

$("#drop_down").mouseleave(function() {
    $(this).stop().slideUp(250); 
});

Upvotes: 2

Related Questions