我需要做類似一個大型菜單,一個作爲顯示圖像低於 菜單項顯示不正確的大型菜單
到目前爲止,我已經能夠使其工作在一定程度上例如在jsFiddle HERE 。
到目前爲止,我有一些設計問題和一個功能問題。
當我嘗試隱藏每個下拉菜單//$(this).find(".nav-info").hide();
的默認文本,然後菜單4 & 5不顯示在右側。
我實際上正在嘗試創建一個類似於此website上的菜單。 一個這個網站,他們還顯示了父母菜單的默認文本,我實際上不需要。
我修改了腳本以顯示其工作的子菜單的第一個子查找父菜單ONE,TWO但爲菜單FOUR和FIVE創建了高亮度問題。
我將不勝感激,如果一些能幫助我解決這個問題...
CODE
<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>
@我至少需要支持IE 7,然後我怎麼才能在li旁邊顯示相關的div – Learning
你能告訴我至少一個菜單作爲例子,以便我可以從他們的 – Learning