使用jquery进行其他功能时，菜单未正确对齐 [英] Menu not aligning properly when using jquery for additional functionality
本文介绍了使用jquery进行其他功能时，菜单未正确对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要创建一个类似于下面的巨型菜单，如下图所示
I need to make a mega menu similar to one as show in image below
到目前为止，我已经能够在 jsFiddle HERE 。
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.
当我试图隐藏每个下拉菜单的默认文本 // $（this）.find（。nav-info）。hide（）; 然后菜单4& 5不会显示在右侧。
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.
我修改脚本以显示子菜单的第一个li，对于父菜单ONE，TWO，但是创建菜单四和五档的对齐问题。
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>
更新：
隐藏html代码块显示下面它打破了MENU FOUR& FIVE使用 $（this）.find（。nav-info）。hide（）;
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>
推荐答案
你可以实现与纯CSS和几行jQuery相同。这是我的方式：
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');
}
});
});
查看它在JSFIDDLE上的工作： http://jsfiddle.net/shekhardesigner/wPWDm/
See it working on JSFIDDLE: http://jsfiddle.net/shekhardesigner/wPWDm/
这篇关于使用jquery进行其他功能时，菜单未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
