ハンバーガーメニュー
ハンバーガーメニューとは
これが通称ハンバーガーメニューだ。
基本的には三本の黒い棒で表しているナビゲーションメニューみたいな感じ。
スマホ版のメニューで使われている印象である。
この三本線を押すとメニューが表示される。
パソコンサイトだとあんま見たことない。
簡単なやつだとHTMLとCSSで作ることが可能。
ハンバーガーメニューの作り方
作るうえで使う言語はHTMLとCSSだ。
普通だとJavaScriptを使うらしい。
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 |
//パソコン版のナビゲーション <div id="pc_nav"> <ul> <li><a href="#">コース紹介</a></li> <li><a href="#">沿革</a></li> <li><a href="#">スタッフ</a></li> <li><a href="#">実績</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> //スマホ版のナビゲーション <div id="sp_nav"> <input type="checkbox" id="input"> <label for="input"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </label> <div id="nav_content"> <ul> <li><a href="#">コース紹介</a></li> <li><a href="#">沿革</a></li> <li><a href="#">スタッフ</a></li> <li><a href="#">実績</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </div> |
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 |
/*pc版のnavを非表示にする*/ #pc_nav{ display:none; } /*sp版を表示して右上で固定している状態にする*/ #sp_nav{ display:block; position:fixed; top:0; right:0; z-index:2; margin-top:20px; } /*checkboxを非表示にする*/ #sp_nav input{ display:none; } /*三本線を空のdiv三つで作る*/ .line{ width:20px; height:3px; background-color:#000000; margin:6px 0 0 70px; } /*開いた時のコンテンツの見た目と隠し方transformを使って右に100pxずらすと画面外へ*/ #nav_content{ width:100px; height:100vh; transform:translateX(100px); background-color:#f0f0f0; } #nav_content ul li{ margin:10px 0; } input:checkedされたら直後の#nav_contentが表示される input:checked~#nav_content{ transform:translateX(0px); } #sp_nav #nav ul li a,#sp_nav #nav ul li a:link,#sp_nav #nav ul li a:visited{ color:#000000; } #sp_nav #nav ul li a:hover{ color:#ed1c1c; } |
内容はコード内にコメントアウトしてあるからそれを参考に。
色をいじりたい人は
CSSのbackground-colorとcolorの16進数をいじれば変えられる。
ちゃんとviewportとメディアスクリーンを使わないと表示が崩れるので注意してください。