JavaScriptでハンバーガーメニューを作ろう
(全9回)
JavaScriptでハンバーガーメニューを実装していく方法について見ていきます。
このレッスンでは HTML5 / JavaScript を使用しています。
-
#01 ハンバーガーメニューを作ろう (01:24) 無料公開中
- 完成版の確認
- 必要となる知識
- 対応ブラウザ
-
#02 ひな形ファイルを作ろう (02:50) 無料公開中
- menu_1.html
- menu_2.html
-
#03 メニューのスタイルを整えよう (02:37)
- メニューのCSS
- 動作確認
-
#04 本文をかぶせていこう (02:52)
- 本文部分の設置
- 動作確認
-
#05 本文をずらしてみよう (02:57)
- クラスの操作
- 動作確認
-
#06 違うパターンで実装してみよう (02:08)
- HTMLのマークアップ
-
#07 スタイルを整えていこう (02:13)
- 本文のスタイル
- メニューのスタイル
- 動作確認
-
#08 メニューが開くようにしよう (02:58)
- #coverのスタイル
- .menu-openのスタイル
-
#09 ハンバーガーメニューを完成させよう (01:49)
- JavaScriptの実装
- 動作確認
メニューを開く前に右にはみ出しているメニューは PC ブラウザだと横スクロールせずに見えないのですが、iPhone で...
