JavaScriptでNETFLIXのモバイルナビゲーションを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、NETFLIXのモバイルナビゲーションを作りましょう。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでNETFLIXのモバイルナビゲーションをスタイリングしよう!

ページ(HTML)の作成

最初にページを作成しましょう。

<!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>

<!DOCTYPE html>

<head>

<title>Netflix Mobile Navigation</title>

</head>

<body>

</button>

<p class="text">Mobile Navigation</p>

</button>

<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>

</ul>

</li>

</ul>

</div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

なんだかよくわからない感じになっていますが、これはNETFLIXのロゴです。

Logos Downloadから取得しています。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

@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;
}

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で制御することで実現します。

要素を取得する

最初に、画面操作に必要な要素を取得します。

// 要素の取得
const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')

// 要素の取得

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'))
})

// クリックイベントの登録

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 ~ 記事まとめ ~

JavaScript ソースコード

// 要素の取得
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'))
})

// 要素の取得

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'))

})

月	火	水	木	金	土	日
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

JavaScriptでNETFLIXのモバイルナビゲーションを作ろう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

ナビゲーションの開閉処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

ナビゲーションの開閉処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Djangoアプリケーション開発 ~事前準備編~

[Golang]アルゴリズムにチャレンジ ~ChannelでFan In/F…

[React]~Ambassador画面6:Productページの実装~

CSSでスライド画面をスタイリングしよう!

[Go言語]ginフレームワークでアプリ開発~バリデーションとDAO編~

cssでスクロールアニメーションをスタイリングしよう！

[Go言語/JavaScript]ハンズオンで作る掲示板アプリ!~投稿機能実…

[React]~MovieApp2: ~コンポーネント化とStateの実装~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル