웹 페이지의 "플라이 아웃"이름은 무엇입니까

Question

amazon.com 및 walmart.com에서 부서를 가리키면 플라이 아웃 기능이 있습니다. 그것은 메뉴와 비슷하게 작동하지만, 링크의 전체 목록을 가진 실제 직사각형 창이 호버에 표시됩니다.

해당 기능의 이름을 찾으려고합니다. 나는 "flyout"이 적절하다고 생각해? 그리고 두 번째 질문으로 비슷한 일을하는 jQuery 플러그인이 있습니다. 나는 플라이 아웃 플러그인 검색을 시도했지만 실제로는 몇 가지 있지만 그들은 내가 원하는 것 같지 않습니다.

Answer 1

했다 ... 그것은 그리 어려운 일이 아니다 ... 사실, 당신이해야 할 것은 HTML의 간단한 목록입니다

<div id="menu"> 
    <ul> 
     <li> 
      <div class="derpartment-title"><a href="#">Item 1</a></div> 
      <div class="submenu"> 
       <ul> 
        <li><a href="#">Item 1.1</li> 
        <li><a href="#">Item 1.2</li> 
        <li><a href="#">Item 1.3</li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <div class="derpartment-title"><a href="#">Item 2</a></div> 
      <div class="submenu"> 
       <ul> 
        <li><a href="#">Item 2.1</li> 
        <li><a href="#">Item 2.2</li> 
        <li><a href="#">Item 2.3</li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 

그런 다음 당신은 그냥 CSS의 .submenu 클래스를 숨기기 :

.submenu { 
    display: none; 
} 

그리고 JQuery와 함께 공중 선회 목록 요소에 클래스를 추가 :

$('#menu li').bind('mouseenter',function(){ 
    $(this).addClass('hovered'); 
}).bind('mouseleave',function(){ 
    $(this).removeClass('hovered'); 
}); 

는 다음 CSS에 각각 properti 추가 공중 선회 하위 메뉴로 ES :

.hovered .submenu { 
display: block; 
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */ 
} 

및 basiclly 그 다음 당신은 그냥 그냥 멋진 메뉴 시스템 믿습니다 스타일 등을 사용하면 링크, 배경에 필요한 속성,

Answer 2

ASP.NET AJAX HoverMenu과 비슷할 수도 있습니다.

Answer 3

그래서 웹 사이트를 살펴본 결과 생각보다 쉽습니다.

인터넷에서 볼 수있는 다른 메뉴와 비교하면 특별한 효과와 애니메이션이 부족합니다.

방화범이 들린 그림을 가지고 있으면 내용물이 모두 으로 숨겨져 있으며 참조 용 <li> 요소 (CSS 스타일)와 연결되어 있습니다.
마우스로 메뉴 항목을 가리면 CSS는 navSaMenuItemMiddle에서 navSaMenuItemMiddleOpen으로 변경되고 절대 위치를 가진 div는 메뉴 항목의 내용으로 채워집니다.

스크립트는 this이며 Amazon.com의 독점 정보입니다. 알렉스으로