次によく再生されている動画

階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！前編

お気に入り登録する

  • マンツーマンの個別講義開催中！

    勉強に行き詰まっていませんか？
    エラーの解消から、実装方法まで丁寧に教えます！
    講師が答えられるなら、基本的にどんな内容でもOK！

    詳細はこちら！

  • スクール形式の講義も！

    プロを目指す方・講義を何回も受けられる方はこちら
    個別のカリキュラムを作成し、長期的にサポート！

    詳細はこちら！
後編の動画はこちら
https://factory-programming-mv.com/video/yM-uZIKpB3s/

SassをCSSにコンパイルする方法はこちら
https://factory-programming-mv.com/video/dyLs8fWm9Gk/

Font Awesomeについてはこちら
https://factory-programming-mv.com/video/AvXlYuLaN_Q/

Sassのmixinについてはこちら
https://factory-programming-mv.com/video/ydmiVIph9Vc/


この動画では、多階層ドロップダウンメニュー（サブメニュー・メガメニュー・メガドロップダウン・ネストされたドロップダウンメニュー・カスケードスタイルのドロップダウンメニュー・ツリー構造のドロップダウンメニューとも言ったりします）を実装する方法を学びます。
特にWordPress(ワードプレス)のカスタムメニューとの連携も考慮して解説されています。
まず、HTML, CSS, そしてJavaScript (ジャバスクリプト) の基本的な知識が求められ、基本的なコードを書くプロセスを一緒に進めていきます。メニューは、ユーザーがホバーやクリック操作をすることで、さらにサブメニューが展開し、それらがさらに自身のサブメニューを持つ、という階層構造を持っています。

動画では主に以下の点に焦点をあてて解説しています。

1. HTML構造の作成: まずは基本的なHTML構造を作成し、ul, li, aタグを使用してメニューとサブメニューの構造を作ります。各階層は適切にネストされ、親子関係が明確に表現されます。

2. CSSの設定: 次に、CSSを使用してメニューのデザインを設定します。ホバー時やクリック時のスタイル変更、サブメニューの表示/非表示の制御等が実装されます。また、メニューのデザインはシンプルに保たれ、初学者でも理解しやすいよう配慮されています。

動画を通じて、多階層のドロップダウンメニューを自分のWebサイトに実装する技術を学ぶことができます。そして、特にWordPressユーザーには、カスタムメニュー機能を利用してこの多階層メニューを実装する方法が有益です。

関連する動画リスト

もっとみる