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

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

ただいまの
回答率

88.80%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 257

taiyaki_26

score 0

前提・実現したいこと

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

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

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

発生している問題

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

該当のソースコード

 <header class="header">
    <div id="topNav">
        <nav id="nav">
            <ul class="listCat clearfix">
                <li id="HOME" class="is_current">
                    <a href="#" id="cat0">
                        <div class="icon_home">
                            ホーム
                        </div>
             </a>
                </li>
                <li id="CONSUMER">
                    <dl>
                    <dt>
                        <a href="#personal-consumer" id="cat1" class="link_cat1 link_cat">メニュー01</a>
                    </dt>
                    <dd id="personal-consumer">
                        <a href="#personal-consumer" class="clickText link_cat1 link_cat">
                            クリックでメニューが開きます
                        </a>
                        <div class="wrap clearfix">
                            <ul>
                                <li> > メニュー項目</li>
                                <li> > メニュー項目</li>
                                <li> > メニュー項目</li>
                            </ul>
                            <a href="#" class="btn_close">メニューを閉じる</a>
                        </div>
                    </dd>
                    </dl>
                </li>
                <li id="BUSINESS">
                    〜CONSUMERと同じ〜
                </li>
                <li id="CORPORATE">
                   〜CONSUMERと同じ〜
                </li>
            </ul>
        </nav>
    </div>
</header>
jQuery(function() {
    function navOnmouse(e) {
        var t = jQuery("#nav");
        var n = jQuery("body").width();
        var r = jQuery(".listCat");
        var i = jQuery(e);
        var s = r.find("dd");
        var o = jQuery(e).children("dl").find("dd");
        if (jQuery(e).attr("id") == "HOME") {
            var u = jQuery("#cat0")
        } else {
            var u = jQuery(e).find("dt").find("a")
        }
        if (n > 480 && navigator.userAgent.indexOf("iPhone") == -1 && navigator.userAgent.indexOf("iPad") == -1 && navigator.userAgent.indexOf("iPod") == -1 && navigator.userAgent.indexOf("Android") == -1) {
            var a = r.width();
            var f = a * .229;
            if (i.hasClass("is_current") && i.is("#HOME")) {
                jQuery(u).find("img").each(function() {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif"))
                });
                t.stop().animate({
                    paddingBottom: 0
                }, 200, function() {
                    s.css({
                        display: "none"
                    })
                })
            } else if (i.is("#HOME")) {
                jQuery(u).find("img").each(function() {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif"))
                });
                if (parseInt(t.css("paddingBottom")) <= 40) {
                    t.stop().animate({
                        paddingBottom: 0
                    }, 200, function() {
                        s.css({
                            display: "none"
                        })
                    })
                }
                return false
            } else {
                jQuery(u).find("img").each(function() {
                    jQuery(this).attr("src", jQuery(this).attr("src").replace("_off.gif", "_on.gif"))
                });
                if (parseInt(t.css("paddingBottom")) == 0) {
                    o.css({
                        display: "block"
                    });
                    jQuery(".clickText").each(function() {
                        jQuery(this).css({
                            display: "block"
                        })
                    });
                    jQuery(".btn_close").each(function() {
                        jQuery(this).css({
                            display: "none",
                            visibility: "hidden"
                        })
                    });
                    t.stop().animate({
                        paddingBottom: 40
                    }, 200)
                } else if (parseInt(t.css("paddingBottom")) <= 40) {
                    s.stop(true, true).fadeOut(200);
                    o.stop(true, true).fadeIn(200)
                } else {
                    return false
                }
            }
        }
    }
    function navReavemouse(e) {
        var t = jQuery("#nav");
        var n = jQuery("body").width();
        var r = jQuery(".listCat");
        var i = jQuery(e).closest("li");
        var s = r.find("dd");
        var o = jQuery(e).closest("dl").find("dd");
        if (n > 480) {
            var u = r.width();
            var a = u * .229;
            if (i.hasClass("is_current") && parseInt(t.css("paddingBottom")) > 40) {
                return false
            } else if (parseInt(t.css("paddingBottom")) <= 40) {
                t.stop().animate({
                    paddingBottom: 0
                }, 200, function() {
                    s.css({
                        display: "none"
                    })
                })
            }
        }
    }
    function sizeCheck() {
        if (jQuery("body").width() < 640) {
            flag.win = false;
            max.col = 2
        } else {
            flag.win = true;
            max.col = 4
        }
    }
    function filtering(e, t) {
        if (flag.cat != e) {
            flag.cat = e;
            jQuery(".btn_more").fadeOut(200);
            _col.fadeTo(200, 0);
            jQuery("#loader").fadeTo(200, 1);
            setTimeout(function() {
                _e.elm.attr("id", "CAT" + e);
                _col.removeClass("hideCol").removeClass("hideCol2");
                _col.not(t).addClass("hideCol");
                if (e == 0 && viewCol < cat0Num) {
                    jQuery(".col:gt(" + viewCol + ")").addClass("hideCol2");
                    jQuery(".btn_more").css("opacity", 1).fadeIn(200)
                }
                cur.resize()
            }, 600)
        } else {
            flag.click = true
        }
    }

    function navHeight() {
        var e = jQuery("#nav");
        var t = jQuery("body").width();
        var n = jQuery(".listCat");
        var r = n.find("dd").find("li");
        if (t > 768) {
            var i = n.width();
            var s = i * .229
        } else if (t > 480) {
            var i = n.width();
            var o = (768 - i) / 2400;
            var s = i * (.28 + o)
        }
        if (t > 480) {
            if (parseInt(e.css("paddingBottom")) > 40) {
                e.css({
                    paddingBottom: s + 100
                })
            }
        }
    }

    jQuery("#HOME, #CONSUMER, #BUSINESS, #CORPORATE").hover(function() {
        navOnmouse(this)
    }, function() {
        if (jQuery(this).hasClass("is_current")) {
            return false
        } else {
            jQuery(this).find("img").each(function() {
                jQuery(this).attr("src", jQuery(this).attr("src").replace("_on.gif", "_off.gif"))
            })
        }
    });
    jQuery(".listCat").on("mouseleave", function() {
        navReavemouse(this)
    });

jQuery(function(){
    jQuery('#cat0').on("click",function(){
        const group = jQuery(this).parents('.listCat'); 
        group.find('.is_current').removeClass('is_current');
        jQuery(this).parents('nav').stop().animate({
            paddingBottom: 0
        }, 200,);
    });
    jQuery('.link_cat1').on("click",function(){
        const group = jQuery(this).parents('.listCat'); 
        group.find('.is_current').removeClass('is_current');
        jQuery(this).closest('li').addClass('is_current');
        jQuery(this).parents('nav').stop().animate({
            paddingBottom: 220
        }, 200,);
        jQuery(this).on("click",function(){
            jQuery(this).closest('li').toggleClass('is_current');
            if(!jQuery(this).closest('li').hasClass('is_current')){
                jQuery(this).parents('nav').stop().animate({
                    paddingBottom:0
                }, 200,); 
            }else {
                jQuery(this).parents('nav').stop().animate({
                    paddingBottom: 220
                }, 200,);
            }
        });
    });

});

補足

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

追記(2020.0724)

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • FrontEnd_Japan

    2020/07/24 01:35

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

    キャンセル

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

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る