使用jquery获取其他功能时菜单无法正确对齐
我需要制作一个类似于下图中显示的大型菜单
到目前为止，我已经能够在某种程度上使其成为jsFiddle HERE的例子。
到目前为止，我遇到了一些设计问题和一个功能问题。
当我尝试隐藏每个下拉菜单//$(this).find(".nav-info").hide();的默认文字时，菜单4＆amp; 5没有显示在右侧。
我实际上正在尝试创建一个与此website类似的菜单。 一个这个网站，他们还显示父菜单的默认文本，我实际上不需要。
我修改了脚本以显示它为父菜单ONE，TWO找到的子菜单的第一个li但是为MENU 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>
更新：
当我试图隐藏下面的html代码块时，它会打破MENU FOUR＆amp;的对齐方式。使用$(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 个答案:
答案 0 :(得分：6)
我检查了你引用的网站示例你可以用普通的CSS和几行jQuery实现相同的功能。这是我的方式：
<强> 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/
答案 1 :(得分：2)
@KnowledgeSeeker，您的代码非常完美，但无需显示和隐藏您可以为每个代码保留一个全局变量：
var html_4="";
and
var html_5="";
对于这两个菜单，然后将内部html代码分别保存在变量中。之后你只需要使用这段代码:(对于标签4）
$(this).find(".nav-info").html("");
$(this).find(".nav-info").html(html_4);
同样适用于五个，只需替换其他选项卡的变量名称，这些选项卡需要为html null，并始终保留此类，因为如果删除类，则会出现css问题。
答案 2 :(得分：2)
我继续用纯css实现这个。它依赖于特定定义的宽度和高度以及细节的绝对定位。因此，弹出框不会自动调整大小以适合其内容。
细节需要背景，因为为了模拟已经显示的第一个项目，我只是一直显示它。其他项目，当悬停时，只悬停在第一个项目的顶部。如果不存在背景，您将能够看到背后的第一个项目的详细信息。
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;
}
答案 3 :(得分：2)
你本可以尝试http://greengeckodesign.com/menumatic/或Nettus +有关于它的好文章： http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？