JavaScript のドロップダウン メニューが最適ですか?[閉まっている]
https://stackoverflow.com/questions/101536
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
JavaScript のドロップダウン メニューを探しています。
これは、IE6 および Firefox 2 でも動作する、最もシンプルでエレガントなアクセス可能なメニューである必要があります。番号なしリストで動作する場合は問題ありません(ul) そのため、ユーザーは JavaScript サポートなしでページを使用できます。
どれをお勧めしますか?そのようなメニューのコードはどこで見つけられますか?
解決
jquery superfish メニューは素晴らしくて使いやすいと思います。
http://users.trpg.com.au/j_birch/plugins/superfish/
JavaScript は 必要ありません, 、そしてそれは単純な有効な ul unorder リストに基づいています。
他のヒント
上記のような CSS のみのソリューションを使用して、JavaScript が無効になっていてもユーザーがドロップダウン メニューを表示できるようにします。
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 を使用したメニューの要件である場合、優れたアクセシビリティ オプションが組み込まれています。
- アンドリュー
スティックマンが好きです アコーディオン, 、どのように動作させたいかによっては、素晴らしい効果になる可能性があります。
私は（恥ずかしがらずに）Yahoo! のファンです。ユーザーインターフェイスライブラリ。 彼らは素晴らしいメニューバーシステムを持っています それは実装が簡単です。優れたクロスブラウザーのサポート。
おそらく、jQuery などの他の人気のある JavaScript フレームワークからも同様のものを入手できます。
