CSSオンリーのトグルメニュー

以前、CSSのみのトグルメニュー作成記事を書いたが、より簡単な方法があった。

HTML


<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


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

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

コメントする




two × 4 =