クリックで開け閉めするCSSオンリーのドロップダウンメニュー

マウスオーバーを使ったメニューはCSS2の頃からよく見かけたが、クリックで開け閉めできるものは見かけないので書いてみる。要はこのブログの左上にあるメニューと同じようなものです。(このブログのはJsですが)

クリックとなるとJavascriptが必要そうだが、CSSIE9以上で動作のみで表現可能。

実際のプレビューコード

ポイントはチェックボックスを使っての状態判別。チェックボックスがオンになっていたらリストを表示する。

疑似セレクタについて

.dropInput:checked ~ .menu {…}の「E ~ F」は間接セレクタと言い、E要素が前方にあるFにのみスタイルを適用する。

ここでは直前のチェックボックスがONになっているときのulの状態を表すときに利用している。

注意点

スマホではinput自体を非表示にするとそのフィールドが無効になるみたいなので、上記のコードだと動作しない模様。

スマホに対応させるにはinputはdisplayで非表示にせず、absoluteとz-indexを使いラベルの背面に設置をすれば動くみたいです。

コメントする




sixteen − 12 =