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

2015-04-14

マウスオーバーを使ったメニューはCSS2の頃からよく見かけたが、クリックで開け閉めできるものは見かけないので書いてみる。IE9以上で動作可能。

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

疑似セレクタについて

.dropInput:checked ~ .menu {…}の「E ~ F」は間接セレクタと言い、E要素が前方にあるFにのみスタイルを適用する。ここでは直前のチェックボックスがONになっているときのulの状態を表すときに利用している。

注意点は、スマホではinput自体を非表示にするとそのフィールドが無効になるみたいなので、上記のコードだと動作しない模様。スマホに対応させるにはinputはdisplayで非表示にせず、absoluteとz-indexを使いラベルの背面に設置をすれば動くみたいです。

更に簡単な方法

【追記】もっと簡単な方法があった。

<label for="toggle" onclick=""  for="menuToggle">menu</label>  
<input type="checkbox" id="toggle" autocomplete="off">
<ul id="menu">  
  <li>LIST1</li>
  <li>LIST2</li>
  <li>LIST3</li>
</ul>

autocomplete="off"は、ページリロード時にフォームがリセットされないFirefoxの仕様を解除するためのもの。また、モバイルSafariではラベルクリックでチェックボックスのON/OFFを切り替えることができないので、空のonclick=""を使いクリックイベントで代替している。

CSS

こちらもIE9以上で利用可能。IE8以下でも、labelをdisplay: noneで非表示にしなければ利用できる。

#toggle {
  display: none;
  cursor: pointer;
  }
#menu {
  display: none;
  }
#toggle:checked + #menu {
  display: block;
  }