javascript - jquery を使用して追加機能を使用すると、メニューが正しく配置されない

Question

下の画像に示すようなメガメニューを作成する必要があります

これまでのところ、 jsFiddle HEREの例である程度機能させることができました。

これまでのところ、いくつかの設計上の問題と 1 つの機能上の問題があります。

各ドロップダウン メニューのデフォルト テキストを非表示にしようとすると//$(this).find(".nav-info").hide();、メニュー 4 と 5 が右側に表示されません。

私は実際にこのウェブサイトのようなメニューを作成しようとしています. このWebサイトの1つでは、実際には必要のない親メニューのデフォルトテキストも表示されます。

サブメニューの最初の li を表示するようにスクリプトを修正しました。親メニュー ONE、TWO では機能しますが、MENU FOUR および FIVE では位置合わせの問題が発生します。

この問題を解決するのに役立つ人がいれば幸いです...

コード

<div class="container_16">
    <div class="nav-main grid_16">
        <div class="wrap-nav-media">
            <ul id="nav-top-media">
                <!-- ONE -->
                <li class="nav-item-1"><a href="../company-overview">Parent Menu One</a>

                    <div style="display: none;" class="inner-nav-media">
                        <ul>
                            <li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a> 
                            </li>
                            <li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
                            </li>
                            <li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
                            </li>
                        </ul>
                        <div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1">    <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-1</p>
                            </div>
                        </div>
                        <div style="display: block;" class="menu-page" id="mega-sub-1-relative-2">  <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-1-relative-3">   <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-3</p>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- TWO -->
                <li class="nav-item-2"> <a href="../capabilities">Parent Menu TWO</a>

                    <div style="display: none;" class="inner-nav-media">
                        <ul>
                            <li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
                            </li>
                            <li class=""><a class="current" href="../capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
                            </li>
                            <li class="last"><a class="current" href="../capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-1</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-2-relative-2">   <a href="../building" title="Building" rel="nofollow" class="thumb">
                                    <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-2-relative-3">   <a href="../rail" title="Rail" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-3</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="nav-item-3"><a href="../projects">THREE</a> 
                </li>
                <li class="nav-item-4"> <a href="../-businesses">FOUR</a>

                    <div style="display: none;" class="inner-nav-media">
                        <div style="display: block; float:right;" class="menu-page nav-info">   <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                        <ul>
                            <li class="">   <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>

                            </li>
                            <li class="">   <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>

                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
                                        <img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-4-relative-2">   <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
                                        <img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="last nav-item-5"><a href="../sustainability">FIVE</a>

                    <div style="display: none;" class="inner-nav-media">
                        <div style="display: block;" class="menu-page nav-info">    <a class="thumb" rel="nofollow" title="" href="">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>This is Default text when i try to hide this then this menu moves to left</p>
                            </div>
                        </div>
                        <ul>
                            <li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
                            </li>
                            <li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
                            </li>
                            <li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
                            </li>
                            <li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="../safety.html" title="" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-3</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-2">   <a href="../environment.html" title="Environment" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-3">   <a href="../community.html" title="Community" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-3</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-4">   <a href="../quality.html" title="Quality" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-4</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

アップデート：

その下にあるhtmlコードブロックショーを非表示にしようとすると、使用してMENU FOUR＆FIVEの配置が崩れます$(this).find(".nav-info").hide();

<div style="display: block;" class="menu-page nav-info">    <a class="thumb" rel="nofollow" title="" href="">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

    <div>
        <p>This is Default text when i try to hide this then this menu moves to left</p>
    </div>
</div>

Answer 1

例として参照しているサイトを確認しましたが、プレーンな CSS と数行の jQuery で同じことを実現できます。これが私のやり方です：

HTML

<nav class="nav-wrapper">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu one</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu two</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu three</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/people/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu four</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </li> 
        <li><a href="#">Menu Two</a></li>
        <li><a href="#">Menu Three</a>
            <div class="dropdown">
                <ul>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Menu Long Three</a></li>
        <li><a href="#">Menu Four &amp; Long</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu inner</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu Four &amp; Long - sub menu inner </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis magna, condimentum sit amet interdum quis, gravida accumsan risus. Donec vulputate dolor in turpis ornare, sed dictum ligula pretium. Nullam sed dolor mollis magna auctor porttitor.  Duis sem sem, pretium non lorem vitae, lacinia eleifend ligula. Aliquam ipsum erat, gravida eget hendrerit in, fermentum vel odio. Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt. </p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu two</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu three</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a></li>
                    <li><a href="#">Sub menu having long texxt</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Sub menu three consectqtero</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

CSS

body {
    font:normal 14px Arial, Sans-serif;
}

a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}

.nav {
    width:940px;
    margin:0 auto;
}

.nav li {
    list-style:none;
    position:relative;
}

.nav > li {
    display:inline-block;
    font-size:14px;
    color:#ccc;
    background:#444;
    min-width:160px;
}

.nav > li > a {
    padding:10px 20px;
    color:#ccc;
    display:block;
    text-align:center;
}

.dropdown {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    color:#444;
    min-height:160px;
    background:#ccc;
}

.dropdown.has-panel {
    width:600px;
}

.dropdown > ul {
    width:180px;
    background:#ccc;
}

.dropdown > ul > li {
    position:static;
}

.dropdown > ul > li > a {
    font-weight:bold;
    text-transform:uppercase;
}

.dropdown-last {
    left:auto;
    right:0;
}

.dropdown-last > ul {
    float:right;
}

.dropdown li > a {
    color:#555;
    padding:10px 20px;
    border-bottom:1px solid #bbb;
    display:block;
}

.dd-panel {
    position:absolute;
    background:#ccc;
    left:180px;
    top:0;
    width:380px;
    padding:20px;
    display:none;
    bottom:0;
}

.dropdown li:first-child .dd-panel,
.dropdown li:hover .dd-panel {
    display:block;
}

.dropdown-last .dd-panel{
    left:auto;
    right:180px;
}

.dd-panel > .media {
    float:left;
    margin:3px 20px 10px 0;
    max-height:130px;
}

.media-caption {
    margin:0;
}

.dropdown li a:hover {
    color:#000;
    background:#bfbfbf;
}

.nav li:hover {
    background:#ccc;
}

.nav li:hover > a  {
    color:#444;
}
.nav li:hover .dropdown {
    display:block;
}

jQuery

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 600 > $('.nav').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
    });

    /* if dropdnw*/
    $(".dropdown").each(function(){
        var $this = $(this);
        if($this.find(".dd-panel").length > 0){
            $this.addClass('has-panel');
        }
    });
});

JSFIDDLE での動作を確認してください: http://jsfiddle.net/shekhardesigner/wPWDm/

Answer 2

私は先に進み、これを純粋なcssで実装しました。具体的に定義された幅と高さ、および詳細の絶対配置に依存しています。したがって、ポップアップ ボックスはコンテンツに合わせて自動的にサイズ変更されません。

詳細には背景が必要です。なぜなら、すでに表示されている最初のアイテムをシミュレートするために、常に表示するだけだからです。他のアイテムは、ホバーすると、最初のアイテムの上にホバーします。背景が存在しない場合は、その背後にある最初のアイテムの詳細を見ることができます。

HTML:

<ul class="dropdown-mega">
    <li class="dd-mega-item">
        <a href="#">Menu 1</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item">
        <a href="#">Menu 2</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item">
        <a href="#">Menu 3</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item is-aligned-right">
        <a href="#">Menu 4</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item is-aligned-right">
        <a href="#">Menu 5</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
</ul>

CSS:

.dropdown-mega, .dropdown-mega ul {
    margin: 0;
    padding: 0;
    }

    .dropdown-mega li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .dd-mega-item {
        float: left;
        position: relative;
        z-index: 10;
        }

        .dd-mega-item > a {
            background-color: #08f;
            color: #fff;
            display: block;
            height: 30px;
            line-height: 30px;
            padding: 0 40px;
            text-decoration: none;
            vertical-align: middle;
            }

        .dd-mega-item:hover > a {
            background-color: #06d;
            color: #f80;
            text-decoration: underline;
            }

        .dd-mega-item:hover > .dd-mega-sub > .dd-mega-sub-item:first-child > .dd-mega-sub-item-details {
            display: block;
            z-index: 9;
            }

        .dd-mega-sub {
            background-color: #0af;
            display: none;
            left: 0;
            height: 200px;
            position: absolute;
            top: 30px;
            width: 500px;
            z-index: 10;
            }

            .dd-mega-sub-item {
                clear: left;
                float: left;
                width: 100px;
                }

                .dd-mega-sub-item > a {
                    background-color: #0cf;
                    color: #000;
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    text-decoration: none;
                    vertical-align: middle;
                    }

                .dd-mega-sub-item:hover > a {
                    background-color: #fff;
                    text-decoration: underline;
                    }

                .dd-mega-sub-item-details {
                    background-color: #0ff;
                    display: none;
                    height: 200px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 400px;
                    z-index: 10;
                    }

                    .dd-mega-sub-item-details > img {
                        float: right;
                        }

                .dd-mega-sub-item:hover > .dd-mega-sub-item-details {
                    display: block;
                    }

        .dd-mega-item:hover > .dd-mega-sub {
            display: block;
            }

        .dd-mega-item.is-aligned-right > .dd-mega-sub {
            left: auto;
            right: 0;
            }

            .dd-mega-item.is-aligned-right > .dd-mega-sub >  .dd-mega-sub-item {
                clear: right;
                float: right;
                }

            .dd-mega-item.is-aligned-right > .dd-mega-sub >  .dd-mega-sub-item > .dd-mega-sub-item-details {
                left: 0;
                right: auto;
                }

JSFiddle ここ