こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、ナビゲーションによく使われるハンバーガーメニューをスタイリングしましょう。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & 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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Animated Navigation</title> </head> <body> <nav class="active" id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Works</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <button class="icon" id="toggle"> <div class="line line1"></div> <div class="line line2"></div> </button> </nav> <script src="script.js"></script> <!-- Dribbble link: https://dribbble.com/shots/2427219-Header-Navigation-Day-053-dailyui --> </body> </html> |
|
1 2 3 4 5 6 7 8 9 |
// 要素を取得 const toggle = document.getElementById('toggle') const nav = document.getElementById('nav') // clickイベントの登録 toggle.addEventListener('click', () => { // activeクラスの付け替え nav.classList.toggle('active') }) |
スタイリング
これからCSSでスタイリングをします。項目に出てくるbodyやnavは、HTMLの要素です。
全体の設定
全体の設定をスタイリングします。
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスのサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
body
bodyのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
body { background-color: #eafbff; /* 背景色をグラデーション */ background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); font-family: "Muli", sans-serif; /* flexにする */ display: flex; /* flex重点の真ん中に配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; height: 100vh; margin: 0; } |
nav
navのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
nav { background-color: #fff; padding: 20px; width: 80px; display: flex; align-items: center; justify-content: center; /* 縁を丸く */ border-radius: 3px; /* 影をつける */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* アニメーションをつける liner(リニア)は開始から終了まで一定に変化させる */ transition: width 0.6s liner; /* x軸に対してはみ出た要素を非表示 */ overflow-x: hidden; } |
ul
ulのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 |
nav ul { display: flex; /* ・を消す */ list-style-type: none; padding: 0; margin: 0; width: 0; transition: width 0.6s linear; } |
li
liのスタイリングをします。
|
1 2 3 4 5 6 7 8 |
nav ul li { /* 要素をY軸方向に回転 */ transform: rotateY(0deg); /* 透過性100% */ opacity: 0; /* アニメーション */ transition: transform 0.6s linear, opacity 0.6s linear; } |
icon
iconのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.icon { background-color: #fff; /* 枠線を削除 */ border: 0; /* カーソルをポインター */ cursor: pointer; padding: 0; /* アイテム位置の起点 */ position: relative; height: 30px; width: 30px; } .icon:focus { /* 押した時の青線を非表示 */ outline: 0; } |
line
lineのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 |
.icon .line { background-color: #5290f9; height: 2px; width: 20px; /* relativeを起点にアイテムの位置を決める */ position: absolute; top: 10px; left: 5px; transition: transform 0.6s linear; } |
line2
line2のスタイリングをします。
|
1 2 3 4 |
.icon .line2 { top: auto; bottom: 10px; } |
active
activeのスタイリングをします。activeは、JavaScriptで制御するCSSのクラスです。
|
1 2 3 |
nav.active { width: 350px; } |
クリックするとこうなります。
|
1 2 3 |
nav.active ul { width: 100%; } |
|
1 2 3 4 |
nav.active ul li { opacity: 1; transform: rotateY(360deg); } |
|
1 2 3 4 5 6 7 |
nav.active .icon .line1 { transform: rotate(-765deg) translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); } |
translateYで❌点を作ってます。
a
aのスタイリングをします。
|
1 2 3 4 5 6 7 8 |
nav ul a { /* アイテム位置の起点 */ position: relative; color: #000; /* 下線を非表示 */ text-decoration: none; margin: 0 10px; } |
これで、完成です。
おわりに
一見、複雑そうに見えるハンバーガーメニューのスタイリングですが、一つ一つ分解して考えると恐るるにたらずですよね^^
本記事は自分用のメモのつもりで書いてますが、よかったら参考にしてください。
それでは、また！
CSSまとめ
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスのサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: #eafbff; /* 背景色をグラデーション */ background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); font-family: "Muli", sans-serif; /* flexにする */ display: flex; /* flex重点の真ん中に配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; height: 100vh; margin: 0; } nav { background-color: #fff; padding: 20px; width: 80px; display: flex; align-items: center; justify-content: center; /* 縁を丸く */ border-radius: 3px; /* 影をつける */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* アニメーションをつける liner(リニア)は開始から終了まで一定に変化させる */ transition: width 0.6s liner; /* x軸に対してはみ出た要素を非表示 */ overflow-x: hidden; } nav ul { display: flex; /* ・を消す */ list-style-type: none; padding: 0; margin: 0; width: 0; transition: width 0.6s linear; } nav ul li { /* 要素をY軸方向に回転 */ transform: rotateY(0deg); /* 透過性100% */ opacity: 0; /* アニメーション */ transition: transform 0.6s linear, opacity 0.6s linear; } nav ul a { /* アイテム位置の起点 */ position: relative; color: #000; /* 下線を非表示 */ text-decoration: none; margin: 0 10px; } .icon { background-color: #fff; /* 枠線を削除 */ border: 0; /* カーソルをポインター */ cursor: pointer; padding: 0; /* アイテム位置の起点 */ position: relative; height: 30px; width: 30px; } .icon:focus { /* 押した時の青線を非表示 */ outline: 0; } .icon .line { background-color: #5290f9; height: 2px; width: 20px; /* relativeを起点にアイテムの位置を決める */ position: absolute; top: 10px; left: 5px; transition: transform 0.6s linear; } .icon .line2 { top: auto; bottom: 10px; } nav.active { width: 350px; } nav.active ul { width: 100%; } nav.active ul li { opacity: 1; transform: rotateY(360deg); } nav.active .icon .line1 { transform: rotate(-765deg) translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。