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

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

ハンバーガーメニュー

ハンバーガーメニュー

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

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

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

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

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

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

 

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

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

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

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

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

デモ

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

DEMO

コード

htmlはこんな感じ

CSSはこんな感じ

以前に書いた

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

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

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

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

なるほど~

おまけ

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

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

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

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

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

CSSだけでハンバーガーメニュー【jqueryは使わない】” に対して 3 件のコメントがあります

  1. コニー より:

    初めまして。
    シンプルですごく使いやすそうなので実装したいと思うのですが、スマホやタブレットではこのハンバーガーメニューを表示させて、PC(ブラウザ幅1024px以上)では横並びのグローバルメニューを表示させたいのですが、その場合どうしたら良いのでしょうか?
    PCではチェックボックスがオフの時にナビゲーションを表示させるということは可能でしょうか?
    お手数ですが教えていただけると助かります。
    よろしくお願いいたします。

  2. コニー より:

    午前中にお送りした質問ですが、自己解決できました!
    お騒がせしてすいませんでした。
    これからも参考にさせていただきますね。
    有難うございました。

    1. とっつぁん より:

      コメント頂きありがとうございます。
      自己解決出来たとの事で、蛇足となってしまうと思いますが、

      色々やり方はあるかと思いますが
      CSSのメディアクエリで対応する事が多いと思います。

      例:ハンバーガーメニューのCSSを以下のように記述する

      @media screen and (max-width: 1080px) {
      ハンバーガーメニューのCSS
      }

コメントを残す

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