Q&A
とりあえず、scriptタグを閉じ忘れているようです。
webサイトを作成する上でハンバーガーメニューを構築しています。多階層メニューを作りたいのですがやり方がわかりません。
以下のサンプルコードでHTMLのメニュー1 > サブメニュー1 > サブサブメニュー1/2/3/4というように分岐させるにはnav-menuをどのように書き換えればよいでしょうか。以下HTML/CSS/JavaScriptの順に記載しています。ご指南いただけますと幸いです。
HTML5
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="description" content=""> 7 <meta name="keywords" content=""> 8 <link rel="shortcut icon" href="./img/common/favicon.ico"> 9 10 <title>タイトル</title> 11 <link rel="stylesheet" type="text/css" href="css/common.css"> 12 <script> 13 (function(d) { 14 var config = { 15 kitId: 'grk5msi', 16 scriptTimeout: 3000, 17 async: true 18 }, 19 <script> 20</head> 21<body> 22 23 <!-- header start --> 24 <header class="header"> 25 <div class="container"> 26 <div class="header-main"> 27 <a class="logo" href="./index.html"> 28 <img src="./img/common/trias-logo.svg" width="175" height="auto"> 29 </a> 30 <div class="open-nav-menu"> 31 <span></span> 32 </div> 33 <div class="menu-overlay"> 34 </div> 35 <!-- navigation menu start --> 36 <nav class="nav-menu"> 37 <div class="close-nav-menu"> 38 <img src="img/common/close.svg" alt="close"> 39 </div> 40 <ul class="menu"> 41 <li class="menu-item menu-item-has-children"> 42 <a href="#" data-toggle="sub-menu">メニュー1<i class="plus"></i></a> 43 <ul class="sub-menu"> 44 <li class="menu-item"><a href="#">サブメニュー1</a></li> 45 <li class="menu-item"><a href="#">サブメニュー2</a></li> 46 <li class="menu-item"><a href="#">サブメニュー3</a></li> 47 <li class="menu-item"><a href="#">サブメニュー4</a></li> 48 </ul> 49 </li> 50 <li class="menu-item"> 51 <a href="#">メニュー2</a> 52 </li> 53 </ul> 54 </nav> 55 <!-- navigation menu end --> 56 </div> 57 </div> 58 </header> 59 <!-- header end --> 60 61 <!-- main start --> 62 <main class="main"></main> 63 <!-- main end --> 64 65 <!-- footer start --> 66 <footer class="footer"></footer> 67 <!-- footer end --> 68 <script src="js/script.js"></script> 69</body> 70</html>
CSS3
1@charset "utf-8"; 2 3*, 4::before, 5::after { 6 padding: 0; 7 margin: 0; 8 box-sizing: border-box; 9} 10 11ul, 12ol { 13 list-style: none; 14} 15 16a { 17 color: inherit; 18} 19 20body { 21 font-family: sans-serif; 22 font-size: 16px; 23 color: #000000; 24 line-height: 1; 25 background-color: #ffffff; 26} 27 28img { 29 max-width: 100%; 30} 31 32.header-inner { 33 max-width: 1200px; 34 height: 110px; 35 margin-left: auto; 36 margin-right: auto; 37 padding-left: 40px; 38 padding-right: 40px; 39 display: flex; 40 justify-content: space-between; 41 align-items: center; 42} 43 44.toggle-menu-button { 45 display: none; 46} 47 48.header-logo { 49 display: block; 50 width: 170px; 51} 52 53.site-menu ul { 54 display: flex; 55} 56 57.site-menu ul li { 58 margin-left: 20px; 59 margin-right: 20px; 60} 61 62.site-menu ul li a { 63 font-family: 'Montserrat', sans-serif; 64 font-weight: bold; 65} 66 67@media (max-width: 800px) { 68 .site-menu ul { 69 display: block; 70 text-align: center; 71 } 72 73 .site-menu li { 74 margin-top: 20px; 75 } 76 77 .header { 78 position: fixed; 79 top: 0; 80 left: 0; 81 right: 0; 82 background-color: #ffffff; 83 height: 50px; 84 z-index: 10; 85 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 86 } 87 88 .header-inner { 89 padding-left: 20px; 90 padding-right: 20px; 91 height: 100%; 92 position: relative; 93 } 94 95 .header-logo { 96 width: 100px; 97 } 98 99 .header-site-menu { 100 position: absolute; 101 top: 100%; 102 left: 0; 103 right: 0; 104 color: #ffffff; 105 background-color: #736E62; 106 padding-top: 30px; 107 padding-bottom: 50px; 108 display: none; 109 } 110 111 .header-site-menu.is-show { 112 display: block; 113 } 114 115 .main { 116 padding-top: 50px; 117 } 118
JavaScript
1(() =>{ 2 3 const openNavMenu = document.querySelector(".open-nav-menu"), 4 closeNavMenu = document.querySelector(".close-nav-menu"), 5 navMenu = document.querySelector(".nav-menu"), 6 menuOverlay = document.querySelector(".menu-overlay"), 7 mediaSize = 991; 8 9 openNavMenu.addEventListener("click", toggleNav); 10 closeNavMenu.addEventListener("click", toggleNav); 11 // close the navMenu by clicking outside 12 menuOverlay.addEventListener("click", toggleNav); 13 14 function toggleNav() { 15 navMenu.classList.toggle("open"); 16 menuOverlay.classList.toggle("active"); 17 document.body.classList.toggle("hidden-scrolling"); 18 } 19 20 navMenu.addEventListener("click", (event) =>{ 21 if(event.target.hasAttribute("data-toggle") && 22 window.innerWidth <= mediaSize){ 23 // prevent default anchor click behavior 24 event.preventDefault(); 25 const menuItemHasChildren = event.target.parentElement; 26 // if menuItemHasChildren is already expanded, collapse it 27 if(menuItemHasChildren.classList.contains("active")){ 28 collapseSubMenu(); 29 } 30 else{ 31 // collapse existing expanded menuItemHasChildren 32 if(navMenu.querySelector(".menu-item-has-children.active")){ 33 collapseSubMenu(); 34 } 35 // expand new menuItemHasChildren 36 menuItemHasChildren.classList.add("active"); 37 const subMenu = menuItemHasChildren.querySelector(".sub-menu"); 38 subMenu.style.maxHeight = subMenu.scrollHeight + "px"; 39 } 40 } 41 }); 42 function collapseSubMenu(){ 43 navMenu.querySelector(".menu-item-has-children.active .sub-menu") 44 .removeAttribute("style"); 45 navMenu.querySelector(".menu-item-has-children.active") 46 .classList.remove("active"); 47 } 48 function resizeFix(){ 49 // if navMenu is open ,close it 50 if(navMenu.classList.contains("open")){ 51 toggleNav(); 52 } 53 // if menuItemHasChildren is expanded , collapse it 54 if(navMenu.querySelector(".menu-item-has-children.active")){ 55 collapseSubMenu(); 56 } 57 } 58 59 window.addEventListener("resize", function(){ 60 if(this.innerWidth > mediaSize){ 61 resizeFix(); 62 } 63 }); 64 65})();
「ハンバーガーメニュー」とは、.open-nav-menuのことでいいですか？
CSS に .active についてのルールがないですが、問題ありませんか？
質問掲載時、不要箇所を削除した際に間違えて消してしまったかもしれないです。
基本的にこちらのYouTubeを参考にして作っています。情報不足で申し訳ありません。https://youtu.be/vb_u7mj84Tc
「分岐させる」とは具体的にはどのような動作ですか？ アコーディオンメニューのようにしたい、ということですか？
伝え方が下手で申し訳ないです。つまり、
メニュー1
└ サブメニュー1
├ サブサブメニュー1
├ サブサブメニュー2
というように分岐させたいという意味です。加えて、サブメニュー1からサブサブメニューへの分岐を表示させる際、メニュー1からサブメニューへの分岐の表示と同じようにしたいという意味です。
わかりづらくて大変申し訳ないです。
ツリー用の罫線記号を書きだしたい、ということですか？
クリックすると表示する、みたいなアコーディオンメニュー的動作は不要ということでいいですか？
いえ、そうではないです。アコーディオンメニュー的動作をさせたいですが構造として上のツリーのようにしたいということです。
アコーディオンメニューにおいてスマホ操作で
メニュー1を押すとサブメニュー1,2,3,4が出てきて、そこでまたサブメニュー1を押すとサブサブメニューが出てくるという感じにしたいということです。
ということは、実際のコードではサブメニューまではアコーディオンメニューの動作ができていて、それをサブサブメニューまで広げたい、みたいな話でしょうか？
だとすると、おそらく、スクリプトを書きなおさないといけないと思います。
その通りです。ほんとうにわかりにくい説明ですいません。
おそらくHTMLのclass=menu-item menu-item-has-childrenあたりを入れ子構造に書き換えるのかなと思って色々試行したのですがうまくできませんでした。
それとも例えばclass=menu-item menu-item-has-grandchildrenのようにもう一つ別のクラスを用意しないといけないのでしょうか？その場合JavaScriptも追記が必要になってくるのでしょうか。
スクリプトを拝見すると、data-toggle の値をチェックしない形で書いていますよね？ なので、入れ子でdata-toggleを別にしても区別できない書き方をされていると思います。全体の構成から考え直されてはどうでしょうか？
https://youtu.be/vb_u7mj84Tc
これの通りに作っている感じです。data-toggleをチェックするように書き直すとはJavaScriptの部分のことでしょうか？
そのとおりです
回答1件
0
ベストアンサー
ご提示のコードが不完全のようなので、想像で回答します。
こういうことでしょうか？
https://jsfiddle.net/Lhankor_Mhy/z6k0ob3s/
css
1 .sub-menu { 2 max-height: 0; 3 overflow: hidden; 4 }
投稿2022/06/06 09:09
総合スコア36115
あなたの回答
tips
プレビュー
