2012-07-17 8 views
0

jQuery 메뉴 작업 중입니다. http://jsfiddle.net/HZxjb/ 내가 필요로 무엇jQuery Menu - 마우스 위로

, 각 하위 범주에서 검색 할 수 있습니다 :

는 여기에 바이올린입니다. 지금 마우스가 "집"위에있을 때, "텍스트 1"을 지나갈 때 하위 카테고리가 다시 슬라이드됩니다. 어떻게 멈출 수 있습니까?

또한 하위 카테고리를 주 카테고리 옆으로 밀어 넣으시기 바랍니다. 따라서 마우스가 "집"을 넘으면 서브 리가 옆으로 미끄러집니다. 내 마우스가 "서비스"를 초과하면 서브 리가 옆에 미끄러 져 "서비스"가 그 아래에 있으므로 "홈"옆에 하위 버튼이 없습니다.

또한 하나의 버튼에서 다른 버튼으로 빠르게 이동하면 되돌아 오는 버튼 아래에 나타나는 하위 버튼을 볼 수 있습니다.이 작업을 수행하지 못하게하는 방법은 무엇입니까?

+0

이 작업을 수행하는 올바른 방법은 각 하위 항목을 부모 요소에 삽입하는 것입니다. – Novak

답변

1

http://jsfiddle.net/HZxjb/13/

당신은 id 각 하나를 호출 할 필요가 없습니다. 내가 당신에게 준 것은 메뉴 작성 방법입니다.

내가 추천 할 것입니다 무엇 :

기초를 알지 못하고, 일을 복잡하게 만드는 시작하지 마십시오. 예를 들어

, 다음 코드는, 당신이 그것을 보면 방법에 상관없이, 단지 잘못입니다 :

$(document).ready(function() { 
    $(".sub_button_home").hide(); 
}); 
$(document).ready(function() { 
    $(".sub_button_services").hide(); 
}); 
$(document).ready(function() { 
    $(".sub_button_products").hide(); 
}); 

을뿐만 아니라 당신은 (display: none 포함) CSS에서, 당신이 3 개 기능을 부착하는 것이 할 수있는 , 모든 코드를 포함하는 대신에.

기본 구조를 익히려면 jQuery API를 읽는 것이 좋습니다.

+0

게시물을 편집하기 전에 피들 (Fiddle)을 열었습니다. 그러나 새로운 편집 된 바이올린이 제대로 작동하지 않습니다. 슬라이드 효과가 더 이상 작동하지 않습니다. – larin555

+0

죄송합니다. 다음을 사용하십시오. http://jsfiddle.net/HZxjb/13/ – Novak

+0

도움을 주셔서 감사합니다. 나는 지금 더 잘 이해한다. – larin555

0

무엇을하기 전에 먼저 유용한 HTML을 작성해야합니다. 목록이없는 목록 항목을 사용하는 방법에 대해 어떻게 생각하십니까? 그리고 테이블 레이아웃을 디자인하기 위해 테이블을 사용하는 방법에 대해서는이 시점에서 아무 말도하지 않는 것이 좋습니다.

목표를 달성하기 위해서는 정렬되지 않은 중첩 목록 만 있으면됩니다. Stu Nichols의 메뉴 용 Google. 거기서 당신은 다른 메뉴를위한 많은 가능성을 발견 할 것입니다.