3

そこで、CSS をより深く学び始めることにし、純粋な CSS ドロップダウン メニュー/選択ボックスの実装を試みることから始めました。いくつかのオンライン チュートリアルで利用可能なコードを調べることから始めました。

最終的に、私はこれを思いつきました。これはかなりまともだと思います。しかし、Javascript を捨てると微妙な問題が発生するため、すべての場合において、CSS メニューが Javascript メニューの適切な代替にはならない可能性があるという結論に達しました。

ドロップダウン メニューの項目が単なる<a hrefリンクであれば、すべて問題ありません。ただし、各リンクで Javascript イベントを発生させたい場合は、次の問題が発生します。

  • ユーザーがドロップダウン ボックスの項目をクリックすると、ドロップダウン ボックスが消えるようにする必要があります。ドロップダウン ボックス内の項目が要素の場合、これは自動的に行われます<a>。それらが<a>要素でない場合、ドロップダウン ボックスはクリックしても消えません。つまり、次の 2 つのオプションがあります。(A) リッスンする Javascript を配線してonclickから、ドロップダウン ボックスを非表示にするか、または (B ) css:activeセレクターを使用して、ドロップダウン ボックスの displayプロパティをに設定しますnone。(A) は基本的にその時点で Javascript メニューに戻っているため、愚かであり、(B) メニューの項目をクリックしたときに Javascript イベントが発生しないため、うまくいきません。

  • そのため、タグを使用する必要があります。<a>つまり、イベントをメニュー項目の選択に関連付けるにはonclick、<a>タグでインラインを使用する必要があります。それは問題ありませんが、それを行う場合を除いて、ドロップダウンメニューが消えるのを防ぎます（私のjsfiddleリンクで示されているように）。したがって、実際には、CSS のみのドロップダウン メニューは、ユーザーがメニュー項目を選択したときにやりたいことが<a> リンクを介して別のページに移動することだけである場合にのみ機能するように見えます。いくつかの落とし穴が付属していない Javascript 関数を起動する方法が見つかりません。

質問:それで、私が言ったことは正確ですか? または、(A)ユーザーがクリックすると消え、(B) Javascript 関数をトリガーする CSS のみのドロップダウン メニューを作成する方法はありますか?

4

5 に答える 5

5

あなたは少し混乱していると思います。存在するバイナリがあると考えているようです: すべての CSS またはすべての JS のいずれかです。これはばかげた考え方です。CSS を使用することが理にかなっている場合は CSS を使用し、CSS が作成されていないことを行うために JS を使用する必要があります。ほとんどの場合、CSS を使用して面倒な作業 (メニューの非表示/表示など) を行い、CSS が提供できない追加機能でそのメニューを強化することは、ほとんどのプロのフロントエンド開発者がメニューを作成する方法です。

于 2012-05-29T23:21:24.377 に答える
5

私は本当にあなたをフォローしていません。ドロップダウンを「明らかに」消したいのはなぜですか？

もしそうなら、それを消す必要があります。これがあなたが望んでいる「明白な」ことであるかどうかは私にはわかりません。

マウスがまだホバー領域の上にあるため、メニューは消えません。これはまさに css が行うべきことです。他の動作が必要な場合は、javascript を使用する必要があります。ほとんどの場合、別のページにリダイレクトするか、現在の状態を変更するか (ポップアップ ダイアログなどを使用するなど) しているため、問題にはなりません。

CSS メニューは、私が使用したほとんどの用途に適しています。CSSメニューを使用して、リダイレクトしない、またはとにかくメニューを閉じるような根本的な状態変更を引き起こさないことはほとんどありません。

したがって、私の答えは、純粋な css メニューを使いにくくする特定のユースケースがあるからといって、他のほとんどの用途に役立たないという意味ではないと思います。

そうは言っても、JavaScript を使用しているからといって、本格的な JavaScript メニューに戻す必要があるわけではありません。完全な js メニューの複雑さを必要とせずに、単純に JavaScript を使用して標準の動作を微妙に変更することができます。

于 2012-05-29T22:54:44.627 に答える
3

このようなドロップダウンで JS を使用しないという目標は誤解を招くと思います。ナビゲーションにドロップダウンを使用している場合 (参照を使用して外部またはページ上で#)、メニューを手動で非表示にする必要はありません。他の機能に使用している場合は、JS と接続する必要があると考えるのが妥当です。つまり、レンダリングされた要素を「手動で」操作することは恥ずべきことではありません。

確かに、ここには別の用途があります。あなたの jsfiddle の例は、スタイリッシュな要素によく似てい<select>ます-それが実際にあなたの意図である場合、個々のリンクを次のようなものに簡単に置き換えることができます

<label><input type="radio" name="test-select" value="1" />Item 1</label>

これはネイティブに送信できます-そのような最小限のフォーム機能は、おそらくjavascriptなしで取得できるほとんどのものです

于 2012-05-29T23:31:03.730 に答える
3

あなたの質問はいくつかの研究を示しており、非常によく説明されています。ただし、いくつかの混乱があります。最後に、何か（イベント、関数など）をトリガーしたいので、JavaScriptを使用したいと考えています。

だから私の答えは：

css はドロップダウン メニューに最適です。ユーザーがメニューをクリックしたときに JavaScript を使用する場合は、次のようにします。

<a href="javascript:my_function()" >Item 1</a>

関数はmy_function()必要なコードを実行し、選択した要素を非表示にすることもできます。

このjfiddleでは、従来の window.alert 関数を使用して例を作成しました。この関数は、好みの JavaScript に置き換えることができます。

メニューを非表示にすることに対するあなたの懸念についての最後の発言: あなたは本当にそれを劇的に必要としていますか? 関数が実行されると、おそらくユーザーの注意は何か他のことに集中し、ドロップダウンから移動します...しかし、なぜそれを消したいのか説明しなかったので、正確にはわかりません.

于 2012-05-29T23:09:16.763 に答える
1

CSS メニューは、単に「機能する」だけではありません。最後にメニューに JS を使用したのはいつか思い出せません。自慢ではありませんが、CSS のみを使用して作成したこのメニューには、多くのアクセスがあります。アイコン付きのドロップダウンがあります。

http://www.stpetersburgwebdesigner.com/2011/03/pep-wayfinder-menu-for-modx-evolution/

于 2012-05-30T00:00:56.613 に答える