2

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

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

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

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

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

サブメニューの最初の部分を表示するようにスクリプトを修正しましたが、親メニューの 1 つ、2 つを検索しますが、メニュー 4 と 5 の位置合わせの問題が発生します。

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

コード

<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>
4

2 に答える 2

1

ドキュメントの先頭に次を追加します。

    <!--[if lt IE 9]>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>       
    <![endif]-->

Rachel Reveley が提案した方法を使用してください。

li:hover ul {display: block;}

このコードは、古いブラウザーでの HTML 5 および CSS3 のサポートを追加します。そして、それは私にとって完璧に機能しているようです。

于 2013-09-23T16:00:20.810 に答える
0

IE6 をサポートしていない限り、ドロップダウン メニューを機能させるために JavaScript は必要ありません。

構造をこのようなものに変更すると

<ul>
    <li><a href="">Click me</a>
        <ul>
            <li>This is showed when Click Me! is clicked.</li>
        </ul>
    </li>
</ul>

CSSで簡単にこれを行うことができます

li:hover ul {display: block;}
于 2013-09-22T12:34:27.610 に答える