こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、NETFLIXのモバイルナビゲーションを作りましょう。
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Netflix Mobile Navigation</title> </head> <body> <button class="nav-btn open-btn"> <i class="fas fa-bars"></i> </button> <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo"> <p class="text">Mobile Navigation</p> <div class="nav nav-black"> <div class="nav nav-red"> <div class="nav nav-white"> <button class="nav-btn close-btn"> <i class="fas fa-times"></i> </button> <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo"> <ul class="list"> <li><a href="#">Teams</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Life at Netflix</a></li> <li> <ul> <li><a href="#">Netflix culture memo</a></li> <li><a href="#">Work life balance</a></li> <li><a href="#">Inclusion & diversity</a></li> <li><a href="#">Blog</a></li> </ul> </li> </ul> </div> </div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

なんだかよくわからない感じになっていますが、これはNETFLIXのロゴです。
Logos Downloadから取得しています。
スタイル(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 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .text { text-transform: uppercase; } .logo { width: 150px; } .nav-btn { border: none; background-color: transparent; cursor: pointer; font-size: 20px; } .open-btn { position: fixed; top: 10px; left: 10px; } .nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; } .nav.visible { transform: translateX(0); } .nav-black { background-color: rgb(34, 31, 31); width: 60%; max-width: 480px; min-width: 320px; transition-delay: 0.4s; } .nav-black.visible { transition-delay: 0s; } .nav-red { background-color: rgb(229, 9, 20); width: 95%; transition-delay: 0.2s; } .nav-red.visible { transition-delay: 0.2s; } .nav-white { background-color: #fff; width: 95%; padding: 40px; position: relative; transition-delay: 0s; } .nav-white.visible { transition-delay: 0.4s; } .close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .list { list-style-type: none; padding: 0; } .list li { margin: 20px 0; } .list li a { color: rgb(34, 31, 31); font-size: 14px; text-decoration: none; text-transform: uppercase; } .list ul { list-style-type: none; padding-left: 20px; } |
ここまで実装すると以下のようになります。

JavaScriptの実装
ナビゲーションの開閉は、CSSで設定したvisibleクラスをJavaScriptで制御することで実現します。
要素を取得する
最初に、画面操作に必要な要素を取得します。
1 2 3 4 |
// 要素の取得 const open_btn = document.querySelector('.open-btn') const close_btn = document.querySelector('.close-btn') const nav = document.querySelectorAll('.nav') |
ナビゲーションの開閉処理
クリックイベントを登録して、ナビゲーションの開閉処理を実装しましょう。
1 2 3 4 5 6 7 8 |
// クリックイベントの登録 open_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.add('visible')) }) close_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.remove('visible')) }) |
classList.add/classList.removeでCSSのvisibleクラスを付け替えしています。
これで、完成です。
おわりに
今回は、ほとんどCSSの仕事でしたね^^;タイトル詐欺か。
しかし、ナビゲーションを作成する際は、デザインの一つとして非常に参考になりますね。
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 要素の取得 const open_btn = document.querySelector('.open-btn') const close_btn = document.querySelector('.close-btn') const nav = document.querySelectorAll('.nav') // クリックイベントの登録 open_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.add('visible')) }) close_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.remove('visible')) }) |
コメントを残す
コメントを投稿するにはログインしてください。