Web Design：メニューアイコン制作『真ん中のバーが背景となり上下のバーがバツになるメニューアイコン』の作り方(※コーディング動画※)

＜チャプター＞
00:00:00｜デモスタート

00:00:52｜オープニング

※HTML
00:01:07｜htmlコーディング

00:01:23｜画面左右中央表示

※SCSS（CSS）
00:01:32｜SCSS（CSS）コーディング開始

00:01:39｜.navi-iconコーディング01

00:02:03｜.navi-iconコーディング02

00:02:15｜.navi-icon::beforeコーディング

00:02:35｜.barコーディング

00:02:55｜.bar:nth-of-type(1)コーディング

00:03:08｜.bar:nth-of-type(2)コーディング

※HTML
00:03:25｜.is-open追加

※SCSS（CSS）
00:03:31｜.is-open::beforeコーディング

00:03:42｜.is-open .barコーディング

00:04:01｜.is-open .bar:nth-of-type(1)コーディング

00:04:20｜.is-open .bar:nth-of-type(2)コーディング

※jQuery
00:04:35｜.is-oepn削除

00:04:51｜jQueryコーディング開始

00:04:57｜openNaviIcon()関数

※ソースコード
00:05:25｜ソースコード確認

00:05:43｜デモエンド

00:06:28｜エンディング

＜概要＞

＜動画のソースコードのダウンロードはこちら＞
↓↓↓↓↓
『Web Design｜真ん中のバーが背景となり上下のバーがバツになるメニューアイコン』
URL

皆様のWebサイト制作にお役立てください。
Webデザイン勉強中の方は、勉強素材としてもどうぞ！

＜チャンネル運営元＞
↓↓↓↓↓
ホームページ制作｜MATEREATE(マテリエイト)
https://matereate.com/

****************************************************

html、css、jQueryを使用し、ボタンやナビゲーションなどWebサイトで扱う様々なパーツを制作するコーディング動画です。自分のメモ用としてアップロードしています。基本的にscss(sass)でコーディングしていますが、右側には常にcssファイルを表示しているので、もし参考にしたいという方がいらっしゃいましたら、どうぞご視聴ください。

****************************************************

＜音楽素材＞
DOVA-SYNDROME https://dova-s.jp/


#Webデザイン
#メニューアイコン
#クリックアニメーション
#サイト制作
#html
#css
#jquery
#デザインアイディア
#コーディング動画
#マテリエイト
#ホームページ制作