Geek Answers Handbook

Incorrect menu alignment when using jquery for extra functionality

I need to make a mega menu similar to the one shown in the image below enter image description here

So far, I have managed to some extent give an example in jsFiddle HERE .

So far, I have a design problem and one problem with functionality.

When I try to hide the default text for each drop-down menu //$(this).find(".nav-info").hide(); , then menus 4 and 5 are not displayed on the right side.

I am actually trying to create a menu similar to the one on this website . On this website, they also show default text for the parent menu, which I really don't need.

I modified the script to show the first li submenu that it finds for the parent menu ONE, TWO, but creates an alignment problem for MENU FOUR and FIVE.

I would appreciate if someone could help me fix this problem ...

THE 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 the display of the html code block below, it interrupts the alignment of the FOUR and FOUR MENU with $(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>
+4
source share
4 answers

I checked the site that you linked to for an example. And you can achieve this with simple CSS and a few jQuery lines. 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 &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'); } }); });

See how JSFIDDLE works: http://jsfiddle.net/shekhardesigner/wPWDm/

+6
source

@KnowledgeSeeker, your code is perfect, but don't have to show and hide, you can just save one global variable for each type:

  var html_4=""; and var html_5="";

for both menus, and then save your internal HTML code in these variables separately. After that, you simply execute this code: (For tab four)

  $(this).find(".nav-info").html(""); $(this).find(".nav-info").html(html_4);

the same for five, just replace the variable name for another tab, you need html null for these tabs, and always keep this class, because if you delete the class, your css problem will appear.

+2
source

I went ahead and implemented this in pure css. It relies on specially defined widths and heights, as well as absolute positioning for parts. Thus, pop-ups will not automatically resize to fit its contents.

Details require a background, because to simulate the first element that is already displayed, I always show it. Other objects, when they hang, simply hang on top of the first element. If the background does not exist, you can see its first details.

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 here

+2
source

You could try http://greengeckodesign.com/menumatic/ or Nettus + has a good article about this: http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

+2
source

More articles:


All Articles