CSSでのドロップダウンメニューとJavaScriptでのドロップダウンメニューってどっちのほうが負荷的には高いんですか？ いつもCSSで作ってます。
作り方にもよるでしょうが、CSSの方が機構的に軽く作れそう。
CSSの場合トリガーがホバー(マウスオーバー)しか無いと思ってるんですがクリックしてドロップダウンって出来るんです？(質問になってすみません)
クリック式のは作れません。一応できますが:targetを使うことになります。（不安定になりますが）
ありがとうございました！:click疑似要素ができたらどんなに楽なことか…
:focusでできると思う。
さすがにfocusは無理だろう
inputたちを細工する感じカナ… :focus
どんなタグでも、tabindexを指定すれば、:focusでメニューは実装できますよ。隣接セレクタなどとの併用になると思います。
CSSはネイティブな動作。JSは外付けな動作。という認識。
WebKitとかGeckoとか中身の話しだからなあ。ちなみにChromeはデバックツールでどの処理にどれだけ時間が掛かったか表示される。最近JS周りは年ごとに倍々で高速化されてるし、HTML5とCSS3の解釈も相当面倒な事になってるから、JQuery使ってようが大して変わらんだろう。そもそもHTML5対応のブラウザが動くPCのスペックを考えれば微々たるもの。
その微々たる差の積み重ねがWebアプリのパフォーマンスを決定するんですがね。侮れませんよ。特にDOM捜査の回数はかなり差が出ると思う。
ドロップダウンを表示させるトリガーをCSSの疑似要素を使うかJSのイベントを使うか、JSのイベントを使った場合の表示非表示をJSで直接スタイルを変更するか、表示非表示のクラスを用意してクラスを変更するか、等なら考慮しなくていいレベルだと思います。メンテナンスしやすい方法で。ただJS使った方が融通が効くし、クロスブラウザもしやすいと思います。
みんなの回答 6 件
作り方にもよるでしょうが、CSSの方が機構的に軽く作れそう。
CSSの場合トリガーがホバー(マウスオーバー)しか無いと思ってるんですが
クリックしてドロップダウンって出来るんです？(質問になってすみません)
クリック式のは作れません。
一応できますが:targetを使うことになります。（不安定になりますが）
:target擬似クラスを使ったプルダウンメニュー | CSS-EBLOG
http://css-eblog.com/csstechnique/target.htmlCSSはネイティブな動作。JSは外付けな動作。という認識。
WebKitとかGeckoとか中身の話しだからなあ。
ちなみにChromeはデバックツールでどの処理にどれだけ時間が掛かったか表示される。
最近JS周りは年ごとに倍々で高速化されてるし、HTML5とCSS3の解釈も相当面倒な事になってるから、JQuery使ってようが大して変わらんだろう。
そもそもHTML5対応のブラウザが動くPCのスペックを考えれば微々たるもの。
ドロップダウンを表示させるトリガーをCSSの疑似要素を使うかJSのイベントを使うか、JSのイベントを使った場合の表示非表示をJSで直接スタイルを変更するか、表示非表示のクラスを用意してクラスを変更するか、等なら考慮しなくていいレベルだと思います。
メンテナンスしやすい方法で。
ただJS使った方が融通が効くし、クロスブラウザもしやすいと思います。
関連するトピックス