CODEWITHSUNDEEP
javascriptjqueryxhtml
Kneel-Before-ZOD
Kneel-Before-ZOD

Reputation: 4221

Gmail-like Sign out

I have a Gmail-like Signout mechanism, such that when you hover on the username (on the top right), it slides down a menu that includes a "sign out" link. The username is on a floated list, while the menu that slides out is on an inner list (not floated). The sliding out/in is performed using jQuery.

This is what it's supposed to do:

This is what it currently does:

Perceived solution: I believe there should be an if clause somewhere that checks if the cursor is on the inner list and keep the inner list open, and that's the part that gets me stumped.

EDIT: Here is the current code:

HTML:

<ul id="user_spot">
    <li><a href="#"><span class="username">username</a>
        <ul id="user_spot_links">
            <li><a href="/home/sign?out=y">Sign Out</a></li> <br />
        </ul>
    </li>
</ul>

CSS:

ul#user_spot li {
    float:left;
    position:relative;
}
ul#user_spot_links {
    position:absolute;
    top:20px;
    display:none;
}
ul#user_spot_links li {
    float:none;
    clear:both;
}

JS:

$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
    return false;
}, function() {
    // this is where I believe the needed code should be"
    $('ul#user_spot_links').slideUp('slow'); 
});

Upvotes: 0

Views: 1776

Answers (2)

techfoobar
techfoobar

Reputation: 66693

You don't need JS for that.

Check this fiddle: http://jsfiddle.net/PaKnc/

Basically the UL that slides down is a child of the LI you hover over. You can manipulate the CSS properties of a child in CSS.

For example:

#parent #child {
   style1;
}

#parent:hover #child {
   style2;
}

Here, style1 and style2 can be totally different. In our case we take advantage of this by altering the display property.

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191779

The problem is that when you need to exit the username anchor to hover over the dropdown. The simple solution is to just change the hover selector to be the li instead of the a. Then, you will not exit it even while you remain hovered over the dropdown.

Upvotes: 1

Related Questions