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

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

ハンバーガーメニュー

ハンバーガーメニュー

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

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

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

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

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

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

 

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

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

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

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

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

デモ

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

DEMO

コード

htmlはこんな感じ

CSSはこんな感じ

以前に書いた

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

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

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

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

なるほど~

おまけ

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です