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



Published
<チャプター>
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
#デザインアイディア
#コーディング動画
#マテリエイト
#ホームページ制作
Category
Web design
Be the first to comment