2011-11-07 2 views
1

나는 이것으로 나를 도울 수 있기를 바랐다. jQuery로 드롭 다운 메뉴를 만들고 브라우저에서 사용할 수있는 JavaScript로 완벽하게 작동한다. 이제는 자바 스크립트가 돌아 왔을 때 작동하도록하고 싶습니다. 어떻게해야하는지 잘 모르겠습니다.jQuery (점진적 향상)로 메뉴 드롭 다운

본인이 볼 수 있도록 여기에 코드가 있습니다.

목록에 내 HTML 페이지 :

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script> 
     <script type="text/javascript" src="p6.js"></script> 
    </head> 
    <body> 
     <ul id="menu"> 

     <li><a href="#">What's new?</a> 
      <ul class="active"> 
     <li><a href="#">Weekly specials</a></li> 
     <li><a href="#">Last night's pics!</a></li> 
     <li><a href="#">Users' comments</a></li> 
      </ul> 
     </li> 

     <li><a href="#">Member extras</a> 
      <ul> 
     <li><a href="#">Premium Celebrities</a></li> 
     <li><a href="#">24-hour Surveillance</a></li> 
      </ul> 
     </li> 

     <li><a href="#">About Us</a> 
      <ul> 
     <li><a href="#">Privacy Statement</a></li> 
     <li><a href="#">Terms and Conditions</a></li> 
     <li><a href="#">Contact Us</a></li> 
      </ul> 
     </li> 

     </ul> 
    </body> 
</html> 

내의 .js

$(document).ready(function(){ 

    $('#menu > li > ul').hide().click(function(e){ 
    e.stopPropagation(); 
    }); 

    $('#menu > li').toggle(function(){ 
    $(this).find('ul').slideDown(); 
    },function(){ 
    $(this).find('ul').slideUp(); 
    }); 

}); 

이 시간 내 주셔서 감사 파일!

도움이 될 것입니다!

J 자바 스크립트가 드롭 다운 메뉴 <select> 또는 사용에 대한 귀하의 유일한 해결책을 해제하는 경우

답변

1

: 아니, 호버 이벤트를하고

JS는 == 더 자바 스크립트를 해제하지

CSS로 그것을 사용자 정의하려고 Jover, 그냥 평범한 HTML과 CSS

1

"hover"pseudoclass를 사용하는 최신 브라우저의 경우 html과 css로이를 수행 할 수 있습니다 (즉, 6 개 이상은 태그를 제외하고 hover pseudoclass를 존중하지 않습니다). 다음과 같은 내용 :

ul#menu li ul { 
    display:none 
} 
ul#menu:hover li ul { 
    display:block 
} 
+0

이 alistapart 기사의 CSS 메뉴에 대한 자세한 내용 : http://www.alistapart.com/articles/horizdropdowns/ – Brighty