この動画はプレミアム会員限定動画です。
閲覧するには登録が必要となります。
プレミアム会員の登録をする
プレミアム会員限定動画階層が深い、ドロップダウン「多階層ドロップダウンメニュー」を実装する方法！WordPress（ワードプレス）のカスタムメニューにも対応！後編
動画で紹介していた内容をダウンロードすることができます。
※PCのみから可能です
前編の動画はこちら
https://factory-programming-mv.com/video/bma-7TabXCc/
JSのfindメソッドについてはこちら
https://factory-programming-mv.com/video/NFfDQhHqzn8/
前回の動画では、メニューの1番と5番にアイコンを追加し、ホバー時にサブメニューを表示する方法を紹介しました。
前回に引き続き、JavaScriptを使用してメニューにクラスを自動で追加する方法を説明します。この際、JavaScriptの基本的な知識が必要とされます。ヘッダーメニューリストを作成し、その中から各メニューを取得します。それぞれのメニューに対して、UL要素が含まれているかどうかをチェックし、UL要素が存在する場合には特定のクラスを追加します。
また、UL要素を探す方法としてJavaScriptのFindメソッドを使用し、その中から子要素のタグ名を取得します。UL要素が見つかればそれを特定のクラスに追加し、見つからなければ処理を続行します。
ユーザーがメニューにホバーした際に、サブメニューが表示されるように、メニュー項目のvisibilityを切り替える方法も紹介されています。ホバーしたときに子要素のULを表示することで、サブメニューがスムーズに表示されるようになります。
https://factory-programming-mv.com/video/bma-7TabXCc/
JSのfindメソッドについてはこちら
https://factory-programming-mv.com/video/NFfDQhHqzn8/
前回の動画では、メニューの1番と5番にアイコンを追加し、ホバー時にサブメニューを表示する方法を紹介しました。
前回に引き続き、JavaScriptを使用してメニューにクラスを自動で追加する方法を説明します。この際、JavaScriptの基本的な知識が必要とされます。ヘッダーメニューリストを作成し、その中から各メニューを取得します。それぞれのメニューに対して、UL要素が含まれているかどうかをチェックし、UL要素が存在する場合には特定のクラスを追加します。
また、UL要素を探す方法としてJavaScriptのFindメソッドを使用し、その中から子要素のタグ名を取得します。UL要素が見つかればそれを特定のクラスに追加し、見つからなければ処理を続行します。
ユーザーがメニューにホバーした際に、サブメニューが表示されるように、メニュー項目のvisibilityを切り替える方法も紹介されています。ホバーしたときに子要素のULを表示することで、サブメニューがスムーズに表示されるようになります。