こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、ナビゲーションによく使われるハンバーガーメニューを作ってみましょう。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
|
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> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(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 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { 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; display: flex; align-items: center; 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); transition: width 0.6s linear; overflow-x: hidden; } nav.active { width: 350px; } nav ul { display: flex; list-style-type: none; padding: 0; margin: 0; width: 0; transition: width 0.6s linear; } nav.active ul { width: 100%; } nav ul li { transform: rotateY(0deg); opacity: 0; transition: transform 0.6s linear, opacity 0.6s linear; } nav.active ul li { opacity: 1; transform: rotateY(360deg); } 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; position: absolute; top: 10px; left: 5px; transition: transform 0.6s linear; } .icon .line2 { top: auto; bottom: 10px; } nav.active .icon .line1 { transform: rotate(-765deg) translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); } |
ここまで実装すると以下のようになります。
個人的に背景色を二分割にする方法が気になったので、別記事にしました。よければ、参考にしてください。
JavaScriptの実装
準備はできたので、早速JavaScriptを実装しましょう。
やることは一つです。html要素に付与した「active」クラスをJavaScriptで付け替えます。
|
1 |
<nav class="active" id="nav"> <<< このactiveクラスをadd/removeするだけ |
要素の取得
JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得します。
|
1 2 3 |
// 要素を取得 const toggle = document.getElementById('toggle') const nav = document.getElementById('nav') |
clickイベントの登録
続いて、clickイベントを登録しましょう。
|
1 2 3 4 |
// clickイベントの登録 toggle.addEventListener('click', () => { }) |
クラスの付け替え
classListのtoggleメソッドを使って、activeクラスの付け替えをしましょう。
|
1 2 3 4 |
toggle.addEventListener('click', () => { // activeクラスの付け替え nav.classList.toggle('active') }) |
これで完成です。
おわりに
今回は、ほとんどCSSの力でしたね^^;
CSSは勉強になる点がたくさんあったので、あとで勉強してみようと思います。
もっと簡単にハンバーガーメニューを実装したいよ！という方は、Bootstrapのナビゲーションの導入もオススメです。
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
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') }) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。