문제

드롭다운 JavaScript 메뉴를 찾고 있습니다.

IE6 및 Firefox 2에서도 작동하는 가장 간단하고 접근하기 쉬운 메뉴여야 합니다.번호가 없는 목록(ul) 사용자가 JavaScript 지원 없이 페이지를 사용할 수 있도록 합니다.

어떤 것을 추천하시나요? 그런 메뉴에 대한 코드는 어디서 찾을 수 있나요?

도움이 되었습니까?

해결책

나는 jquery superfish 메뉴가 환상적이고 사용하기 쉽다고 생각합니다.

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

자바스크립트는 필요하지 않음, 이는 단순하고 유효한 ul 순서 지정 목록을 기반으로 합니다.

다른 팁

A List Apart - 드롭다운

위와 같은 CSS 전용 솔루션을 사용하면 자바스크립트가 비활성화된 경우에도 사용자에게 드롭다운 메뉴가 계속 표시됩니다.

jQuery를 사용한 답변은 다음과 같습니다.


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;
};

그런 다음 onready 핸들러에서 다음을 수행합니다.


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

그러나 나는 이것이 유용성에 있어서 끔찍하다는 점을 지적하고 싶습니다.목록을 사용하고 사람들에게 모든 옵션을 한 번에 표시하는 것이 더 좋으며, 선택한 후 다른 곳으로 이동하거나 원하는 위치로 이동하기 위해 다른 버튼을 누르도록 요구하지 않는 것이 좋습니다.

위의 내용을 절대 사용하지 않는 것이 가장 좋다고 생각합니다. (그리고 제가 코드를 작성했습니다!)

순수주의자의 경우: http://www.grc.com/menudemo.htmJavaScript가 없고 순수 CSS만 있으며 거의 ​​모든 브라우저에서 작동합니다.

약간만 조정하면 멋진 메뉴(jQuery 등)만큼 보기 좋게 만들 수 있습니다.

하지만 우리는 jQuery, YUI도 사용했습니다!다른 사람.유이!JavaScript 기반 메뉴에 필요한 경우 훌륭한 접근성 옵션이 내장되어 있습니다.

- 앤드류

나는 이것을 사용합니다 :

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

수직 및 수평 맛이 모두 제공됩니다.

나는 스틱맨을 좋아한다 아코디언, 원하는 방식에 따라 좋은 효과가 될 수 있습니다.

나는 야후!의 (부끄럽지 않은) 팬이었습니다.사용자 인터페이스 라이브러리. 그들은 멋진 메뉴바 시스템을 가지고 있습니다 구현하기 쉽습니다.뛰어난 크로스 브라우저 지원.

jQuery와 같은 다른 인기 있는 Javascript 프레임워크에서도 비슷한 것을 얻을 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top