2008-09-19 4 views
16

드롭 다운 자바 스크립트 메뉴를 찾고 있습니다.최고의 자바 드롭 다운 메뉴?

IE6 및 Firefox 2에서도 작동하는 가장 단순하고 가장 접근하기 쉬운 메뉴 여야합니다. 번호가 지정되지 않은 목록 (ul)에서 작업하는 것이 좋으므로 사용자는 JavaScript 지원없이 페이지를 사용할 수 있습니다.

어느 쪽을 권하고 어느 곳에서 그런 코드를 찾을 수 있습니까?

http://users.tpg.com.au/j_birch/plugins/superfish/

자바 스크립트가을 필요하지 이며, 그것은 단순한 유효한 UL의 unorder 목록을 기반으로합니다

답변

12

나는 JQuery와 superfish 메뉴 사용하기 환상적이고 쉽게 생각합니다. 나는 위의 같은 CSS 전용 솔루션을 사용하십시오

+0

멋지지만 클릭하지 않고도 동작하는 웹 페이지의 드롭 다운 메뉴를 무시합니다. 그것은 내가 명백한 행동을 취하지 않을 때 내용이 흐려지는 것처럼 보입니다. – delfuego

+0

그것은 슈퍼 피쉬와 어떤 관련이 있습니까? 그것은 그렇게하지 않습니다. – Buzz

+0

나는 아름답고 구성하기가 쉽다. 그리고 가장 중요한 부분은 IE6, IE7 및 Firefox에서 작동한다는 것입니다. 아직 다른 사람들과 테스트하지 않았습니다. – Germstorm

1

저는 stickman의 accordion을 좋아해요. 어떻게 행동 하느냐에 따라 좋은 효과를 낼 수 있습니다. 당신의 onready 처리기


jQuery.fn.ddnav = function() { 
     this.wrap(""); 
     this.each(function() { 
       var sel = document.createElement('select'); 
       jQuery(this).find("li.label, li a").each(function() { 
         jQuery("<option>").val(this.href ? this.href : '').html(jQuery(this).html()).appendTo(sel); 
       }); 
       jQuery(this).hide().after(sel); 
     }); 
     this.parent().find("select").after("<input type=\"button\" value=\"Go\">"); 
     var callback = function(button) { 
       var url = jQuery(button.target).parent("div").find("select").val(); 
       if(url.length) 
         window.open(url, "_self") 
     }; 
     this.parent().find("input[type='button']").click(callback); 
     this.parent().find("select").change(callback); 
     return this; 
}; 

그리고 :

2

여기에 jQuery를 사용하여 내 대답


    $("ul.dropdown_nav").ddnav(); 

하지만 이러한 유용성에 대한 끔찍한 것을 지적한다. 목록을 사용하여 모든 옵션을 한 번에 표시하는 것이 좋으며 선택 후 이동하거나 다른 버튼을 눌러 원하는 위치로 이동하지 않아도되는 것이 좋습니다.

은 당신이 결코 이상 사용하지 않는 오프 최고라고 생각 (내가 코드를 썼다!) 순수 주의자를 들어

2

: http://www.grc.com/menudemo.htm 은 물론 더 자바 스크립트, 순수 CSS는 - 그리고 거의 모든 브라우저에서 작동하지 않습니다.

약간의 조정이 그들 (등 jQuery를) 멋진 메뉴

만큼 좋은 보이게 수 있습니다 그러나 우리는 또한 jQuery를, YUI 사용하고 있습니다! 다른 사람. 유이! 자바 스크립트 기반 메뉴에 대한 요구 사항 인 경우 훌륭한 접근성 옵션이 내장되어 있습니다.

http://www.tanfa.co.uk/css/examples/menu/vs7.asp

수직 및 수평 맛에 온다 : -

앤드류

2

나는이 하나를 사용합니다.

1

나는 Yahoo의 야비한 팬이었습니다. 사용자 인터페이스 라이브러리. They have a nice menubar system을 쉽게 구현할 수 있습니다. 뛰어난 크로스 브라우저 지원.

다른 인기있는 Javascript 프레임 워크 (예 : jQuery)와 비슷한 것을 얻을 수 있습니다.

+0

다음은 YUI 3을 사용하여 드롭 다운 메뉴를 수행하는 예입니다. http://jsbin.com/udigof/1 – relipse