CSSだけでハンバーガーメニュー【jqueryは使わない】
CSSだけでハンバーガーメニューを実装
ハンバーガーメニュー
ワタクシのおじいさんが教えてくれた初めてのjavascriptライブラリ、
それはjqueryでワタクシは4歳でした。
そのコードは面白く簡単で、
こんな素晴らしいjqueryを教えてもらえるワタクシはきっと特別な存在なのだと感じました。
今ではワタクシがおじいさん、孫に教えるのはもちろんjquery、
なぜなら、彼もまた特別な存在だからです。
はい、jqueryは言うまでもなく素晴らしいですね！
最近ではスマートフォン用サイトのド定番のハンバーガーメニュー、
これもjqueryで探せばたくさんありますが、
まぁ、CSSだけで出来るならそれに越したことはありませんね…
という事で、CSSだけで実装するハンバーガーメニューです。
デモ
一先ずデモをつくりました。
コード
htmlはこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--▼▼ハンバーガーメニューここから▼▼--> <div class="hm_wrap"> <input id="hm_menu" type="checkbox" name="hm_menu" class="hm_menu_check"/> <label for="hm_menu" class="hm_btn"></label> <h2 class="hm_title">CSSだけでハンバーガーメニューを実装する方法</h2> <nav class="hm_menu_wrap"> <ul class="hm_list"> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul> </nav> </div> <!--▲▲ハンバーガーメニューここまで▲▲--> |
CSSはこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
/* ▽▽ハンバーガーメニュー▽▽ ------------------------------------------------------- */ .hm_menu_check {/* チェックボックスを隠す */ display: none; } .hm_wrap { display: inline-block; position :fixed; top :0; left :0; width :100%; padding :10px; background :#fff; } .hm_title {/* ハンバーガーメニューオープン時の見出し */ position: relative; color: #999; display: inline-block; float: left; font-weight: 100; line-height: 30px; margin: 0 0 0 15px; opacity: 0; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); -webkit-transition: -webkit-transform 0.6s, opacity 0.5s; transition: transform 0.6s, opacity 0.5s; z-index: 2; } /* ▽▽メニューボタン▽▽ */ .hm_btn { position: relative; width: 30px; height: 30px; cursor: pointer; display: block; float: left; z-index: 2; } .hm_btn::before { -webkit-box-shadow: #000 0 12px 0; box-shadow: #000 0 12px 0; } .hm_btn::after { bottom: 0; } .hm_btn::before, .hm_btn::after { width: 30px; height: 6px; background: #000; display: block; content: ''; position: absolute; -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.2s 0.2s; transition: box-shadow 0.2s linear, transform 0.2s 0.2s; } /* △△メニューボタン△△ */ .hm_menu_wrap { width :100%; height :10000px; background: #fff; position: absolute; left: -100%; top: 0; -webkit-transition: left 0.4s; transition: left 0.4s; } /* ▽▽開閉時のアニメーション▽▽ */ .hm_menu_check:checked ~ .hm_title { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .hm_menu_check:checked ~ .hm_btn::before { -webkit-box-shadow: transparent 0 0 0; box-shadow: transparent 0 0 0; -webkit-transform: rotate(45deg) translate3d(6px, 11px, 0); transform: rotate(45deg) translate3d(6px, 11px, 0); } .hm_menu_check:checked ~ .hm_btn::after { -webkit-transform: rotate(-45deg) translate3d(6px, -11px, 0); transform: rotate(-45deg) translate3d(6px, -11px, 0); } .hm_menu_check:checked ~ .hm_menu_wrap { left: 0; } /* △△開閉時のアニメーション△△ */ /* ▽▽メニュー内のリストスタイル▽▽ */ .hm_list { list-style-type: none; margin: 50px 0 0; padding: 0; } .hm_list li a { color: #777; display: block; overflow: hidden; padding: 8px 22px; position: relative; text-decoration: none; z-index: 1; } .hm_list li a::before {/* aタグマウスオーバー時の背景 */ background: #eee; content: ''; position: absolute; top: 0; right: 0; bottom: 100%; left: 0; -webkit-transition: bottom 0.4s; transition: bottom 0.4s; z-index: -1; } .hm_list li a:hover::before { bottom: 0; } .hm_list li a:hover::after { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* メニュー内のリストスタイル△△ */ /* △△ハンバーガーメニュー△△ ------------------------------------------------------- */ |
以前に書いた
jqueryを使わないcssだけで実装するアコーディオンメニュー
と基本的には同じ事をしています。
見えないチェックボックスを用意して
チェックマークがある時にメニューが出現する、という要領。
おまけ
以前はハンバーガーメニューがまだまだ見慣れてない人も多く、
三本ラインの上か下に「MENU」or「メニュー」を入れるのが
ユーザビリティ的に良いと思ってましたが、
さすがにそろそろ大丈夫なんじゃなかろうかと思います。多分きっと…
なので今回のコードは三本ラインのみでデザインしています。
