CSS だけでハンバーガーメニューを設置する | q-Az

モバイル表示の時右上に「≡」アイコンで設置したりするハンバーガーメニュー。通常ならば JavaScript を用いてクリック時に開くようコードを組むのが普通ですが、CSS だけで設置してみようと思います。 今回作るハンバーガーメニューはマウスホバー時に開くタイプです。ラジオボタンなどを使えばホバーではなくクリックでも開くように作れそうですが、ホバーの方が簡単なのでそちらで作ってみます。 追記 ホバーではなくクリックでメニューの開閉をするバージョンの記事を書きました。 参考：checkboxを使ってCSSだけでハンバーガーメニュー 作り方実際に当記事でもハンバーガーメニューを設置してみました。右上の「≡」アイコンにマウスカーソルを乗せるとメニューが開きます。 HTML<div id="ham-menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー

[sho_yamane]

やっぱclick functionでクラス追加してCSS3で動かすのがベターよな〜