「プルダウンリスト」または「ドロップダウンリスト」という機能が本日のコミュニティの勉強会で話題になりました。
ホームページでメニュー表示するとき使う機能です。親要素(≒親メニュー)にカーソルを合わせると子要素(≒コメニュー)が垂れ下がって表示されるというものです。
これは、JavaScript(またはjQuery)を使うのが一般的ですが…。
CSSでこれを実現する方法もあるみたいです。
- CSSだけで作る動きのあるドロップダウンメニュー|Webpark
- シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー | Ri-mode Rainbow
- CSSでプルダウンメニューを作ってみる | Tips Note
- CSSのみでプルダウンメニューを作る | CSS-EBLOG
ということで、時代は動いている…。CSSがこういう機能を実現する時代に…もなっているのかと…。
でも、リンク先のスクリプトをサラサラと読める人には、そもそもこの記事が必要でない、一方、サラサラと読みたくてもそうならないもどかしさを感じている人には「ドロップダウンリスト」がどのように実現できるか、JavaScriptとCSSがぐじゃぐじゃになって大変なのかと。
ゆえに、基礎となるHTML、CSSの理解があると、こういう場合楽なのだと知ることになるのでもありまする…自省…シュン。