Q&A
検索してもなかなか思うような結果にたどり着かなかったため質問しました。
どなたかお分かりになる方がいらっしゃいましたら教えていただけると助かります。
前提・実現したいこと
Mega site navigationをカスタマイズしています。
パソコンではマウスオーバーで、タブレット、スマホではタップでメガメニューが展開できるようにしたいです。
カスタマイズした主な内容は以下です。
・パソコンでマウスオーバーによるメガメニューの展開を行った。
・class名をjavascriptによって付与したり削除したりできるようにしている。
発生している問題・エラーメッセージ
タブレット・スマホで見た際に、親メニューからスタートせず、3番目のメニューから表示されます。
該当のソースコード
HTML
1<header class="cd-main-header"> 2 <a class="cd-logo" href="#">hogehoge</a> 3 <ul class="cd-header-buttons"> 4 <li><a class="cd-nav-trigger" href="#cd-primary-nav"><span></span></a></li> 5 </ul> <!-- cd-header-buttons --> 6 </header> 7 8 <main class="cd-main-content"> 9 <!-- your content here --> 10 </main> 11 12 <div class="cd-overlay"></div> 13 14 <nav class="cd-nav"> 15 <ul id="cd-primary-nav" class="cd-primary-nav is-fixed"> 16 <li class="has-children" id="hover01"> 17 <a href="javascript:void(0)">1階層目メニュー1</a> 18 19 <ul class="cd-secondary-nav" id="second01"> 20 <li class="go-back"><a href="#">1階層目メニュー1へ戻る</a></li> 21 <li class="has-children"> 22 <a href="#">2階層目メニュー1</a> 23 24 <ul class="is-hidden"> 25 <li class="go-back"><a href="#0">2階層目メニュー1へ戻る</a></li> 26 <li class="has-children"> 27 <a href="#0">3階層目メニュー1</a> 28 29 <ul class="is-hidden"> 30 <li class="go-back"><a href="#0">3階層目メニュー1</a></li> 31 <li><a href="#">4階層目メニュー1</a></li> 32 <li><a href="#">4階層目メニュー2</a></li> 33 <li><a href="#">4階層目メニュー3</a></li> 34 <li><a href="#">4階層目メニュー4</a></li> 35 </ul> 36 </li> 37 <li class="has-children"> 38 <a href="#0">3階層目メニュー2</a> 39 40 <ul class="is-hidden"> 41 <li class="go-back"><a href="#0">3階層目メニュー2へ戻る</a></li> 42 <li><a href="#">4階層目メニュー5</a></li> 43 <li><a href="#">4階層目メニュー6</a></li> 44 <li><a href="#">4階層目メニュー7</a></li> 45 <li><a href="#">4階層目メニュー8</a></li> 46 </ul> 47 </li> 48 <li class="has-children"> 49 <a href="#0">3階層目メニュー3</a> 50 51 <ul class="is-hidden"> 52 <li class="go-back"><a href="#0">3階層目メニュー3へ戻る</a></li> 53 <li><a href="#">4階層目メニュー9</a></li> 54 <li><a href="#">4階層目メニュー10</a></li> 55 <li><a href="#">4階層目メニュー11</a></li> 56 <li><a href="#">4階層目メニュー12</a></li> 57 </ul> 58 </li> 59 </ul> 60 </li> 61 62 <li class="has-children"> 63 <a href="#">2階層目メニュー2</a> 64 65 <ul class="is-hidden"> 66 <li class="go-back"><a href="#0">2階層目メニュー2へ戻る</a></li> 67 <li><a href="#0">3階層目メニュー4</a></li> 68 <li><a href="#0">3階層目メニュー5</a></li> 69 <li><a href="#0">3階層目メニュー6</a></li> 70 <li><a href="#0">3階層目メニュー7</a></li> 71 </ul> 72 </li> 73 74 <li class="has-children"> 75 <a href="#">2階層目メニュー3</a> 76 77 <ul class="is-hidden"> 78 <li class="go-back"><a href="#0">2階層目メニュー3へ戻る</a></li> 79 <li><a href="#0">3階層目メニュー8</a></li> 80 <li><a href="#0">3階層目メニュー9</a></li> 81 <li><a href="#0">3階層目メニュー10</a></li> 82 <li><a href="#0">3階層目メニュー11</a></li> 83 </ul> 84 </li> 85 86 <li class="has-children"> 87 <a href="#">2階層目メニュー4</a> 88 89 90 </li> 91 </ul> 92 </li> 93 94 <li class="has-children" id="hover02"> 95 <a href="javascript:void(0)">1階層目メニュー2</a> 96 97 <ul class="cd-secondary-nav" id="second02"> 98 <li class="go-back"><a href="#0">1階層目メニュー2へ戻る</a></li> 99 <li> 100 <a class="cd-nav-item item-1" href="#"> 101 2階層目メニュー5 102 </a> 103 </li> 104 105 <li> 106 <a class="cd-nav-item item-2" href="#"> 107 2階層目メニュー6 108 </a> 109 </li> 110 111 <li> 112 <a class="cd-nav-item item-3" href="#"> 113 2階層目メニュー7 114 </a> 115 </li> 116 117 <li> 118 <a class="cd-nav-item item-4" href="#"> 119 2階層目メニュー8 120 </a> 121 </li> 122 </ul> 123 </li> 124 125 <li class="has-children" id="hover03"> 126 <a href="javascript:void(0)">1階層目メニュー3</a> 127 128 <ul class="cd-secondary-nav" id="second03"> 129 <li class="go-back"><a href="#0">1階層目メニュー3へ戻る</a></li> 130 <li> 131 <a class="cd-nav-item item-1" href="#"> 132 2階層目メニュー5 133 </a> 134 </li> 135 136 <li> 137 <a class="cd-nav-item item-2" href="#"> 138 2階層目メニュー6 139 </a> 140 </li> 141 142 <li> 143 <a class="cd-nav-item item-3" href="#"> 144 2階層目メニュー7 145 </a> 146 </li> 147 148 <li> 149 <a class="cd-nav-item item-4" href="#"> 150 2階層目メニュー8 151 </a> 152 </li> 153 </ul> 154 </li> 155 156 <li><a href="#">1階層目メニュー4</a></li> 157 <li><a href="#">1階層目メニュー5</a></li> 158 </ul> <!-- primary-nav --> 159 </nav> <!-- cd-nav -->
↓追加したCSSのみ記載しています。これ以外は現在大元からダウンロードしたものをそのまま使用しています。
CSS
1@media only screen and (min-width: 1024px) { 2 #hover01.has-children > #second01, 3 #hover02.has-children > #second02, 4 #hover03.has-children > #second03 { 5 display:none !important; 6 } 7 8 #hover01.on_hover:hover > #second01, 9 #hover02.on_hover:hover > #second02, 10 #hover03.on_hover:hover > #second03 { 11 position:absolute; 12 display:block !important; 13 } 14}
↓JavascriptはテストでHTMLの</body>前に記述しています。
元のJavascriptは変更していません。
Javascript
1<script type="text/javascript"> 2$('#hover01,#hover02,#hover03').hover( 3function(){$(this).addClass('on_hover')}, 4function(){$(this).removeClass('on_hover');} 5); 6</script> 7<script> 8$(function() { 9 $('.on_hover').mouseover(function(e) { 10 $('.cd-secondary-nav').addClass("is-hidden"); 11 }) 12 $('.on_hover').mouseout(function(e) { 13 $('.cd-secondary-nav').removeClass("is-hidden"); 14 }) 15}); 16</script> 17<script> 18if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){ 19$('#hover01,#hover02,#hover03').children('a').on('click', function(event){ 20 if( !checkWindowWidth() ) event.preventDefault(); 21 var selected = $(this); 22 if( selected.next('ul').hasClass('is-hidden') ) { 23 //desktop version only 24 selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out'); 25 selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected'); 26 $('.cd-overlay').addClass('is-visible'); 27 } else { 28 selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out'); 29 $('.cd-overlay').removeClass('is-visible'); 30 } 31 toggleSearch('close'); 32 }); 33} 34</script>
試したこと
上記Javascriptのいずれを削除してみてもエラーの結果は同じでした。
最後に
あまりきれいなソースでなくてすみませんが、CSSでのエラーなのかJavascriptでのエラーなのか
判断がつきかねています。アドバイスをお願いします。
あなたの回答
tips
プレビュー
