Menu
I need to make a mega 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.
So far i have 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 does not 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 dont need actually.
I modified script to show the first li of submenu 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>
UPDATE:
WHEN i try to hide html code block show below it break the alignment of MENU FOUR & FIVE using $(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>
276
I checked the site you were referring for the example And you can achieve the same with plain CSS and few lines of jQuery. Here is my way:
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 & 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 & 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');
}
});
});
See it working on JSFIDDLE: http://jsfiddle.net/shekhardesigner/wPWDm/
148
@KnowledgeSeeker , your code is perfect but no need to show and hide you can just keep one global variable for each like:
var html_4="";
and
var html_5="";
for both menu and then keep your inner html code in that variables separately. After that you just do with this code : (For tab four)
$(this).find(".nav-info").html("");
$(this).find(".nav-info").html(html_4);
same for five also, just replace variable name for other tab you need to html null for these tabs and keep this class always because if you remove class your css issue will be appear.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
