CSSだけでハンバーガーメニュー【jqueryは使わない】

2016年8月17日
とっつぁん とっつぁん
css WEBデザイン
この記事は 15 分くらいで読めると思います
ハンバーガーメニュー
ハンバーガーメニュー

CSSだけでハンバーガーメニューを実装

ハンバーガーメニュー

ハンバーガーメニュー

ワタクシのおじいさんが教えてくれた初めてのjavascriptライブラリ、

それはjqueryでワタクシは4歳でした。

そのコードは面白く簡単で、

こんな素晴らしいjqueryを教えてもらえるワタクシはきっと特別な存在なのだと感じました。

今ではワタクシがおじいさん、孫に教えるのはもちろんjquery、

なぜなら、彼もまた特別な存在だからです。

 

はい、jqueryは言うまでもなく素晴らしいですね!

最近ではスマートフォン用サイトのド定番のハンバーガーメニュー、

これもjqueryで探せばたくさんありますが、

まぁ、CSSだけで出来るならそれに越したことはありませんね…

という事で、CSSだけで実装するハンバーガーメニューです。

デモ

一先ずデモをつくりました。

DEMO

コード

htmlはこんな感じ

CSSはこんな感じ

以前に書いた

jqueryを使わないcssだけで実装するアコーディオンメニュー

と基本的には同じ事をしています。

見えないチェックボックスを用意して

チェックマークがある時にメニューが出現する、という要領。

なるほど~

おまけ

以前はハンバーガーメニューがまだまだ見慣れてない人も多く、

三本ラインの上か下に「MENU」or「メニュー」を入れるのが

ユーザビリティ的に良いと思ってましたが、

さすがにそろそろ大丈夫なんじゃなかろうかと思います。多分きっと…

なので今回のコードは三本ラインのみでデザインしています。

追記(2018.4.28)

メニュー外をクリックした際にメニューを閉じたいとの意見を頂いたので

デモのソースを多少弄りました。

htmlはこんな感じ

navの後に閉じる用のラベルを追加しています。

css追加部分

css変更部分

widthを70%に変更しました。