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

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%に変更しました。

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

  1. コニー より:

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

  2. コニー より:

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

    1. とっつぁん より:

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

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

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

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

  3. みのりん より:

    初めまして。
    理想の動きで、しかもCSSだけなのでぜひ使いたいと思っています。

    デモでは左側にハンバーガーメニューが表示されるのですが、これを右側にしたい時って
    どうしたら良いのでしょうか?
    あまり詳しくないのでどうしたら良いのか分からずで….

    教えていただければ嬉しいです!
    よろしくお願いしますm(_ _)m

    1. とっつぁん より:

      記事ではボタンは以下のようになっていますが
      .hm_btn {
      position: relative;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: block;
      float: left;
      z-index: 2;
      }

      右端に表示する場合は該当部分を以下のようにpositionを絶対値に変更して上下を調整する事になります。

      .hm_btn {
      position: absolute;
      top: 10px;
      right: 40px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: block;
      float: left;
      z-index: 2;
      }

      参考になれば幸いです。

  4. たかぷりん より:

    とても使いやすい魅力的なメニューですね!
    イラストも凄く可愛いです^^

    一つ質問なのですが、ハンバーガーボタン(×になった状態)を
    クリックしなくとも

    ・メニュー選択後に自動でメニューが消える
    もしくは
    ・メニュー外をクリックでメニューが消える

    という挙動は可能なのでしょうか?

    何卒ご教授よろしくお願いいたします。

    1. とっつぁん より:

      ありがとうございます。

      「メニュー選択後に消える」というのはページ内リンク等で利用する場合でしょうか?
      (通常のリンクではクリックするとメニューは閉じると思うので…)

      ラベルで出来れば良いのですが、aタグとの同時使用は出来ないようですので

      記事の方向性とは離れますが
      クリック時にjavascriptでチェックボックスを外すという方法が妥当かと思います。

      メニュー外をクリックして閉じるというのはラベルを配置すれば何とかなりそうですね、
      ワタクシも時間がある時にデモを弄ってみます。

      参考になれば幸いです!

      1. たかぷりん より:

        助言ありがとうございます!
        説明不足ですみませんでした。ご指摘の通りページ内リンクのお話しでした。

        >時間がある時にデモを弄ってみます。
        ありがとうございます^^
        ちょっと期待しております。

        今回のご教授ありがとうございました!!

        1. とっつぁん より:

          こっそりデモのメニュー内にのみ、
          javascriptでページ内リンク時にチェックを外す指定を入れました。

          head内のjavascriptを記述してaタグにonclickイベントを指定する事で
          ページ内のチェックを外すよう指定しています。

          スマートではない気がしますが
          とりあえず目当ての挙動にしたい場合の参考になれば幸いです。

  5. とむ より:

    色々なサイトで調べさせていただきましたが、
    すごくわかりやすく、使いやすかったため実装させていただきました。
    ありがとうございます。

    1点質問なのですが、

    ハンバーガーメニュー内のメニューが多く、見切れてしまいます。
    メニュー内をスクロールすることは可能でしょうか?

    ご教授いただけますと幸いです。

    1. とっつぁん より:

      質問ありがとうございます。
      なるほど、確かにたくさん詰め込みたくなりますよね…

      記事のcssだと.hm_menu_wrapの高さをheight:10000pxと指定してあると思います。
      これを書いた時期だとあまり使われていなかった高さの指定なのですが、

      height :100vh;
      overflow :auto;
      にすることでスクロール可能になるかと思います。

      それぞれ
      100vhは「ビューポートの高さ100%分」という指定、
      overflowは見切れてしまう部分の対処方法の指定です。

      参考になれば幸いです。

      1. とむ より:

        解決できました!
        ご回答ありがとうございました!

コメントを残す

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