質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

738閲覧

メガドロップダウンメニューの表示をタブ化したい

退会済みユーザー

退会済みユーザー

総合スコア0

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/23 11:58

編集2020/07/23 22:08

前提・実現したいこと

KDDIのメガドロップダウンメニューの仕様https://www.kddi.comを再現したく、ソースに書かれていたコードを元にjQuery(1.7)で作っています。
javascript、jQueryに関してはいちから勉強中でビギナーです。。。

実現したい機能は以下の通りです。

・メニュー名をホバーすると「クリックしてメニューを開く」が表示→メニュー名・「クリックすると〜」リンクどちらをクリックしてもメニューが開く
・ナビゲーションが開いた時コンテンツの上にかぶるのではなく、ナビゲーションの高さ分下がる
・一度メニューをクリックして開いたあとはタブ切り替えで別のメニューを表示できる

発生している問題

メニューを開いた後、別のメニューをクリックした際タブのように切り替わって表示をする動きがうまく実装できず、悩んでいます。。。

該当のソースコード

HTML

1 <header class="header"> 2 <div id="topNav"> 3 <nav id="nav"> 4 <ul class="listCat clearfix"> 5 <li id="HOME" class="is_current"> 6 <a href="#" id="cat0"> 7 <div class="icon_home"> 8 ホーム 9 </div> 10             </a> 11 </li> 12 <li id="CONSUMER"> 13 <dl> 14 <dt> 15 <a href="#personal-consumer" id="cat1" class="link_cat1 link_cat">メニュー01</a> 16 </dt> 17 <dd id="personal-consumer"> 18 <a href="#personal-consumer" class="clickText link_cat1 link_cat"> 19 クリックでメニューが開きます 20 </a> 21 <div class="wrap clearfix"> 22 <ul> 23 <li> > メニュー項目</li> 24 <li> > メニュー項目</li> 25 <li> > メニュー項目</li> 26 </ul> 27 <a href="#" class="btn_close">メニューを閉じる</a> 28 </div> 29 </dd> 30 </dl> 31 </li> 32 <li id="BUSINESS"> 33 〜CONSUMERと同じ〜 34 </li> 35 <li id="CORPORATE"> 36 〜CONSUMERと同じ〜 37 </li> 38 </ul> 39 </nav> 40 </div> 41</header> 42

jQuery

1jQuery(function() { 2 function navOnmouse(e) { 3 var t = jQuery("#nav"); 4 var n = jQuery("body").width(); 5 var r = jQuery(".listCat"); 6 var i = jQuery(e); 7 var s = r.find("dd"); 8 var o = jQuery(e).children("dl").find("dd"); 9 if (jQuery(e).attr("id") == "HOME") { 10 var u = jQuery("#cat0") 11 } else { 12 var u = jQuery(e).find("dt").find("a") 13 } 14 if (n > 480 && navigator.userAgent.indexOf("iPhone") == -1 && navigator.userAgent.indexOf("iPad") == -1 && navigator.userAgent.indexOf("iPod") == -1 && navigator.userAgent.indexOf("Android") == -1) { 15 var a = r.width(); 16 var f = a * .229; 17 if (i.hasClass("is_current") && i.is("#HOME")) { 18 jQuery(u).find("img").each(function() { 19 jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif")) 20 }); 21 t.stop().animate({ 22 paddingBottom: 0 23 }, 200, function() { 24 s.css({ 25 display: "none" 26 }) 27 }) 28 } else if (i.is("#HOME")) { 29 jQuery(u).find("img").each(function() { 30 jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif")) 31 }); 32 if (parseInt(t.css("paddingBottom")) <= 40) { 33 t.stop().animate({ 34 paddingBottom: 0 35 }, 200, function() { 36 s.css({ 37 display: "none" 38 }) 39 }) 40 } 41 return false 42 } else { 43 jQuery(u).find("img").each(function() { 44 jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif")) 45 }); 46 if (parseInt(t.css("paddingBottom")) == 0) { 47 o.css({ 48 display: "block" 49 }); 50 jQuery(".clickText").each(function() { 51 jQuery(this).css({ 52 display: "block" 53 }) 54 }); 55 jQuery(".btn_close").each(function() { 56 jQuery(this).css({ 57 display: "none", 58 visibility: "hidden" 59 }) 60 }); 61 t.stop().animate({ 62 paddingBottom: 40 63 }, 200) 64 } else if (parseInt(t.css("paddingBottom")) <= 40) { 65 s.stop(true, true).fadeOut(200); 66 o.stop(true, true).fadeIn(200) 67 } else { 68 return false 69 } 70 } 71 } 72 } 73 function navReavemouse(e) { 74 var t = jQuery("#nav"); 75 var n = jQuery("body").width(); 76 var r = jQuery(".listCat"); 77 var i = jQuery(e).closest("li"); 78 var s = r.find("dd"); 79 var o = jQuery(e).closest("dl").find("dd"); 80 if (n > 480) { 81 var u = r.width(); 82 var a = u * .229; 83 if (i.hasClass("is_current") && parseInt(t.css("paddingBottom")) > 40) { 84 return false 85 } else if (parseInt(t.css("paddingBottom")) <= 40) { 86 t.stop().animate({ 87 paddingBottom: 0 88 }, 200, function() { 89 s.css({ 90 display: "none" 91 }) 92 }) 93 } 94 } 95 } 96 function sizeCheck() { 97 if (jQuery("body").width() < 640) { 98 flag.win = false; 99 max.col = 2 100 } else { 101 flag.win = true; 102 max.col = 4 103 } 104 } 105 function filtering(e, t) { 106 if (flag.cat != e) { 107 flag.cat = e; 108 jQuery(".btn_more").fadeOut(200); 109 _col.fadeTo(200, 0); 110 jQuery("#loader").fadeTo(200, 1); 111 setTimeout(function() { 112 _e.elm.attr("id", "CAT" + e); 113 _col.removeClass("hideCol").removeClass("hideCol2"); 114 _col.not(t).addClass("hideCol"); 115 if (e == 0 && viewCol < cat0Num) { 116 jQuery(".col:gt(" + viewCol + ")").addClass("hideCol2"); 117 jQuery(".btn_more").css("opacity", 1).fadeIn(200) 118 } 119 cur.resize() 120 }, 600) 121 } else { 122 flag.click = true 123 } 124 } 125 126 function navHeight() { 127 var e = jQuery("#nav"); 128 var t = jQuery("body").width(); 129 var n = jQuery(".listCat"); 130 var r = n.find("dd").find("li"); 131 if (t > 768) { 132 var i = n.width(); 133 var s = i * .229 134 } else if (t > 480) { 135 var i = n.width(); 136 var o = (768 - i) / 2400; 137 var s = i * (.28 + o) 138 } 139 if (t > 480) { 140 if (parseInt(e.css("paddingBottom")) > 40) { 141 e.css({ 142 paddingBottom: s + 100 143 }) 144 } 145 } 146 } 147 148 jQuery("#HOME, #CONSUMER, #BUSINESS, #CORPORATE").hover(function() { 149 navOnmouse(this) 150 }, function() { 151 if (jQuery(this).hasClass("is_current")) { 152 return false 153 } else { 154 jQuery(this).find("img").each(function() { 155 jQuery(this).attr("src", jQuery(this).attr("src").replace("_on.gif", "_off.gif")) 156 }) 157 } 158 }); 159 jQuery(".listCat").on("mouseleave", function() { 160 navReavemouse(this) 161 }); 162 163jQuery(function(){ 164 jQuery('#cat0').on("click",function(){ 165 const group = jQuery(this).parents('.listCat'); 166 group.find('.is_current').removeClass('is_current'); 167 jQuery(this).parents('nav').stop().animate({ 168 paddingBottom: 0 169 }, 200,); 170 }); 171 jQuery('.link_cat1').on("click",function(){ 172 const group = jQuery(this).parents('.listCat'); 173 group.find('.is_current').removeClass('is_current'); 174 jQuery(this).closest('li').addClass('is_current'); 175 jQuery(this).parents('nav').stop().animate({ 176 paddingBottom: 220 177 }, 200,); 178 jQuery(this).on("click",function(){ 179 jQuery(this).closest('li').toggleClass('is_current'); 180 if(!jQuery(this).closest('li').hasClass('is_current')){ 181 jQuery(this).parents('nav').stop().animate({ 182 paddingBottom:0 183 }, 200,); 184 }else { 185 jQuery(this).parents('nav').stop().animate({ 186 paddingBottom: 220 187 }, 200,); 188 } 189 }); 190 }); 191 192}); 193

補足

フレームワークは特に使用していません。いろいろと調べてコードをわからないながら書き換えて試しましたが、今の力量ではここまでが精一杯でした。。。問題がどこにあるか、また解決方法をご教授いただければ幸いです。どうぞよろしくお願いいたします。

追記(2020.0724)

文字数制限があり、CSSをこちらに追記することが難しいため、テストサイトのリンクを掲載いたします。
http://watasiha-eri.sakura.ne.jp/navtest/nav.html

お手数おかけして大変申し訳ありません。。。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FrontEnd_Japan

2020/07/23 16:35

同じ環境を実現したいので、CSSも掲載していただけますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問