Mashable like mega menu design
I need to make a mega menu/mashable like menu similar to one as show in
image below
So far i have been able to make it work to some extent example on jsFiddle
HERE.
this has some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu
//$(this).find(".nav-info").hide(); then Menu 4 & 5 doesn't show up on
right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i
don't need actually.
I modified script to show the first li of sub-menu it works find for
Parent menu ONE, TWO but creates alignment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
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>
No comments:
Post a Comment