JavaScriptでハンバーガーメニューを作ろう (全13回)

動画レッスン一覧 (13)
質問と回答 (5)

#01 ハンバーガーメニューを作ろう (02:50) 無料公開中
- 概要の説明
- index.htmlの作成
- viewportの設定
#02 マテリアルアイコンを使ってみよう (02:31) 無料公開中
- マテリアルアイコンの導入
- menuアイコンの作成
- closeアイコンの作成
#03 ヘッダーの要素を配置しよう (02:14) 無料公開中
- logoの作成
- sp-menuの作成
- main要素の作成
#04 CSSでスタイリングしていこう (02:10)
- styles.cssの作成
- bodyのスタイル
- headerのスタイル
- sp-menuのスタイル
#05 ヘッダーのスタイルを整えよう (02:00)
- header h1のスタイル
- sp-menu #openのスタイル
- mainのスタイル
#06 スマートフォン用のメニューを作ろう (02:33)
- overlayの作成
- closeアイコンの設置
- overlayのスタイル
#07 メニューのスタイルを整えよう (02:59)
- overlay #closeのスタイル
- overlay ulのスタイル
- overlay liのスタイル
#08 クリックイベントを設定しよう (02:32)
- main.jsの作成
- open要素の取得
- overlay要素の取得
#09 クリックしたらメニューを表示しよう (02:22)
- openにclickイベントの作成
- showクラスの作成
- hideクラスの作成
#10 メニューを閉じられるようにしよう (01:44)
- closeにclickイベントの作成
- showクラスの削除
- hideクラスの削除
- transitionの設定
#11 アニメーションの設定を完成させよう (02:40)
- overlay liのスタイル
- overlay.show liのスタイル
- li:nth-childのスタイル
#12 PC版のメニューを作ろう (02:32)
- pc-menuの作成
- メディアクエリの作成
- pc-menuのスタイル
#13 PC版のスタイルを整えよう (02:43)
- pc-menu ulのスタイル
- pc-menu aのスタイル
- pc-menu a:hoverのスタイル