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

こんにちは。KOUKIです。

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

実装するもの

今回は、NETFLIXのモバイルナビゲーションのスタイリングをします。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやtextは、HTMLの要素です。

全体の設定

bodyの設定

textの設定

ロゴの設定

nav-btnの設定

open-btnの設定

.navの設定

nav.visibleの設定

nav-blackの設定

nav-redの設定

nav-whiteの設定

close-btnの設定

listの設定

list liの設定

list li aの設定

list ulの設定

これで、完成です。

おわりに

このアプリを動かすと、黒・赤・白のナビゲーションが順番に横スクロールして表示されます。

それを可能にしているのが、「transition-delay: XXs;」です。

これは、面白いですね^^

実務でもチャンスがあれば、取り入れてみたいと思います!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す