この記事では，ハンバーガーメニューの作り方について紹介します．
ハンバーガーメニューと言っても，ハンバーガー屋のメニューのことではありません．
と〜げ
webサイトの幅を狭めると，ヘッダーのメニューが消えて，ハンバーガーのように三本線が現れて，これをクリックするとメニューが表示されるやつです．
↓↓↓↓↓↓↓↓↓↓↓
![](<iframe width="100%" height="100%" style="position: absolute;" src="https://giphy.com/embed/Ut7RMQImycJx5gpf55" frameborder="0" class="giphy-embed" allowfullscreen="allowfullscreen"></iframe>)
では，上のようなハンバーガーメニューを作っていきます．
と〜げ
すべてのファイル（html，css, jsファイル）に関しては，最後に貼っておきます．必要に応じてコピペしてください．
ハンバーガーメニューの作り方
See the Pen
GLvVad by Yoshitaka (@YOSHITAKA3)
on CodePen.
ポイント
- PC幅のときは，ハンバーガー3本線（class=”humberger-wrap）は非表示
SP（スマホ）幅のときは，ハンバーガ3本線（class=”humberger-wrap）を表示，ヘッダーメニュ（nav）ーを非表示させます． - jQueryで，ハンバーガー3本線（.hunmberger-wrap）をクリックすると，ハンバーガ3本線（class=”humberger-wrap）と，ヘッダー（header）にopenedというクラスを追加する
- ハンバーガー3本線をクリックしたときopenedクラスを利用して，cssで，3本線の変化やメニューの形を整える．
htmlファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <!--css--> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!--header--> |
|
1 |
|
1 2 3 4 |
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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
* { box-sizing: border-box; margin:0; padding:0; } body { font-size: .9375rem; font-weight: 400; line-height: 1.67; overflow: hidden; letter-spacing: .05em; color: #333; background: #fff; } a { cursor: pointer; text-decoration: none; color: #000; } ol, ul { list-style:none; } /*--header--*/ header { font-size: 15px; font-size: .9375rem; position: fixed; top: 0; left: 0; width: 100%; height: 60px; letter-spacing: .05em; background:#f1f1f1; } header .inner { display: flex; width: 100%; height: 60px; flex-flow: row wrap; justify-content: center; } /*ハンバーガー3本線を非表示*/ header .humberger-wrap { display:none; } header nav { position:relative; } header nav, header ul { display:flex; } header nav li { cursor:pointer; } header nav a { line-height:60px; display:block; height:60px; padding:0 30px; } @media screen and (max-width:901px) { /*3本線の表示*/ header .humberger-wrap { display:block; } /*3本線の位置*/ header .humberger-wrap { position: absolute; top: 0; right: 20px; width: 40px; height: 100%; cursor: pointer; } /*humberger-border1,2,3の線*/ header .humberger-wrap [class*=humberger-border] { position: absolute; width: 40px; height: 2px; transition: .4s all ease; transform-origin: center center; background: #333; } /*1本目の線*/ header .humberger-wrap .humberger-border-1 { top:20px; right:0; } /*2本目の線*/ header .humberger-wrap .humberger-border-2 { top:30px; right:0; } /*3本目の線*/ header .humberger-wrap .humberger-border-3 { top:40px; right:0; } /*開閉ボタンopen時の横線1本目*/ header .humberger-wrap.opened .humberger-border-1 { top: 30px; transform: rotate(45deg); } /*開閉ボタンopen時の横線2本目*/ header .humberger-wrap.opened .humberger-border-2 { top: 30px; transform: rotate(-45deg); } /*開閉ボタンopen時の横線3本目*/ header .humberger-wrap.opened .humberger-border-3 { top: 30px; transform: rotate(-45deg); opacity:0; } /*メニューを非表示*/ header nav { display:none; } /*open時に一番上のヘッダーの背景色を変化*/ header.opened { background: #fff; } header.opened nav { display: block; min-height: 100vh; opacity: 1; top:60px; } header nav ul.header-navigation { flex-flow: column nowrap; } header nav ul.header-navigation li a { display: block; height: auto; margin: 0; padding: 10px 0; } } |
javascriptファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ $(".humberger-wrap").on("click",function(){ $(".humberger-wrap").toggleClass("opened"); $("header").toggleClass("opened"); }); $(".header-navigation > a").on("click",function(){ $(".humberger-wrap").removeClass("opened"); $("header").removeClass("opened"); }) }); |
