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

こんにちは。KOUKIです。

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

実装するもの

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

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

環境構築

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

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

CSS版

ページ(HTML)の作成

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

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

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

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

スタイル(CSS)を装飾

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

ここまで実装すると以下のようになります。

JavaScriptの実装

ナビゲーションの開閉は、CSSで設定したvisibleクラスをJavaScriptで制御することで実現します。

要素を取得する

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

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

クリックイベントを登録して、ナビゲーションの開閉処理を実装しましょう。

classList.add/classList.removeでCSSのvisibleクラスを付け替えしています。

これで、完成です。

おわりに

今回は、ほとんどCSSの仕事でしたね^^;タイトル詐欺か。

しかし、ナビゲーションを作成する際は、デザインの一つとして非常に参考になりますね。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す