Gmail과 같은 로그 아웃

Question

사용자 이름 (오른쪽 상단)에 마우스를 가져 가면 "로그 아웃"링크가 포함 된 메뉴가 표시됩니다. 사용자 이름은 떠 다니는 목록에 있지만 슬라이드 아웃되는 메뉴는 안쪽 목록에 있습니다 (떠 다니 지 않음). 슬라이딩 아웃/인은 jQuery를 사용하여 수행됩니다.

이

어떻게 해야하는 것입니다 :

이

• 내부 메뉴가 아래로 미끄러 사용자 이름이에 가져 가면 (표시됩니다)
• 마우스가 내부 메뉴로 이동하면 내부 메뉴가 계속 표시됩니다.
• 마우스가 다른 곳을 가리키면 내부 메뉴가 다시 슬라이드됩니다 (보이지 않게 됨).

이은 현재 무엇이다 : 사용자 이름이에 가져 가면

• 내부 메뉴가 아래로 슬라이드;
• 커서가 사용자 이름에서 벗어나면 커서가있는 위치에 관계없이 메뉴가 위로 이동합니다.

감지 솔루션 : 나는 커서가 내부 목록에 오픈 내부 목록을 유지하는 경우 확인 어딘가에 if 조항이 있어야 믿고, 그 날이 난처한 상황에 빠진 얻는 부분입니다. EDIT

:

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 :

01 여기서 현재 코드

$('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'); 
}); 

Answer 1

당신은 JS가 필요하지 않습니다.

확인이 바이올린 :

http://jsfiddle.net/PaKnc/ 기본적으로 UL 아래로 슬라이드하면 위로 마우스 리튬의 자식입니다. CSS에서 자식의 CSS 속성을 조작 할 수 있습니다. 예를 들어

은 : 여기

#parent #child { 
    style1; 
} 

#parent:hover #child { 
    style2; 
} 

, style1style2과는 완전히 다를 수있다. 이 경우에는 display 속성을 변경하여이 기능을 활용합니다.

Answer 2

드롭 다운 위로 마우스를 이동하려면 사용자 이름 앵커를 종료해야하는 경우 문제가 발생합니다. 간단한 솔루션은 호버 선택기를 a 대신 li이되도록 변경하는 것입니다. 그런 다음 드롭 다운 위로 마우스를 올린 채로 있어도 종료하지 않습니다.