이 메뉴를 MultiLevel로 설정하는 방법은 무엇입니까?

Question

난 그냥 다운 메뉴이 멋진 수평 드롭 발견

http://css-tricks.com/examples/DiggHeader/#

을 그리고 나는 그것을 사용하는 싶지만, 나는 다단계가 필요합니다. 그러나 그것을하는 방법 단서 아닙니다. 멀티 레벨 메뉴를 만드는 방법에 대한 자습서를 검색했지만 다운로드 및 데모 미리보기 만 찾을 수 있습니다. : -S

누구나 내가 멀티 레벨 위에 메뉴를 만들 때 어떤 제안을 할 수 있습니까?

는

Answer 1

나는 CSS-Tricks가 좋지만 몇 가지 방법으로이 방법을 사용할 수 있습니다. 여기에 대한 간단한 예제가 나와 있습니다.

HTML 마크 업;

<div id="nav"> 
    <ul> 
    <li> 
     <a href="...">Technology</a> 
     <ul> 
     <li><a href="...">Apple</a> 
      <ul> 
      <li><a href="...">iPhone</a></li> 
      </ul> 
     </li> 
     <li><a href="...">Design</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

공지 사항 <a href="...">Apple</a>에 다음 내 <ul>.

CSS 전용 메소드;

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
    #nav ul li:hover>ul{ 
    display:block; 
    } 
</style> 

이 CSS는 사용자가 가리 키기 전까지 표시 할 필요가없는 요소를 숨 깁니다. 그 다음에 공중보기에 표시됩니다.

효과를 변경하려면 JavaScript로이 요소를 가리 키십시오.

jQuery Method;

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $("#nav ul li").each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).find("ul:first").show(); 
    }).mouseleave(function(){ 
     $(this).find("ul:first").hide(); 
    }); 
    }) 
</script> 

Answer 2

당신은 내가 jQuery를 위해 만든 minimalistic navigation plugin을 확인할 수 있습니다 감사합니다. ul 목록의 상대 위치와 절대 위치를 사용하도록 CSS를 변경하면 해당 링크처럼 작동 할 수 있습니다.