所以,我有一个简单的点击(而不是悬停)“megamenu”,看起来像这样:
一旦用户点击链接,它就会显示在菜单下方,覆盖它下面的任何内容。
但是,除此之外,我需要将此子菜单(蓝色区域)显示在导航栏上方(也就是,一旦打开,将导航栏和内容推到下方),以便它从顶部显示。
我试过使用绝对定位,使用几个偏移插件......但什么都没有,我完全被卡住了(JS 新手)。
我想知道有人能帮忙吗(我知道我问了很多)... 这是一段代码:
<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Parent</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 2</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 2</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 3</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 3</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 4</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 4</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<div style="display:block; height:500px">Lorem Ipsum</div>
fiddle 位于 https://jsfiddle.net/dca1eLqq/ P.S 对不起,我的英语可能不好
P.P.S 由于我的英语不好,我没有正确解释它,所以这里是一个关于它应该是什么样子的快速模型 http://i.imgur.com/enDhe5S.png
最佳答案
“我需要这个子菜单(蓝色区域)显示在导航栏上方(又名,一旦打开就将导航栏和内容推到下面),所以它从顶部出现。” 不是很清楚。
Do you also want the selected menu item to be below the submenu like the rest of the menu
或
only the selected menu item to be above the submenu while the rest of the menu is below the submenu.
据我了解,您要查找的是 OR 语句的第二部分。
为此,您只需进行几处更改。首先,您需要删除绝对定位。即 .cbp-hrmenu .cbp-hrsub
需要更改为:
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: relative; /*change*/
background: #47a3da;
width: 100%;
left: 0;
}
其次,您需要添加类 .cbp-hrmenu > ul > li.cbp-hropen
.cbp-hrmenu > ul > li.cbp-hropen {
display: block;
}
请看下面的片段。我想这就是您要找的。p>
/**
* cbpHorizontalMenu.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
})();
$(function() {
cbpHorizontalMenu.init();
});
.container > header {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}
.container > header {
padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0 0 0.6em 0;
float: left;
font-weight: 400;
}
.container > header > span {
display: block;
position: relative;
z-index: 9999;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container > header > span span:after {
width: 30px;
height: 30px;
left: -12px;
font-size: 50%;
top: -8px;
font-size: 75%;
position: relative;
}
.container > header > span span:hover:before {
content: attr(data-content);
text-transform: none;
text-indent: 0;
letter-spacing: 0;
font-weight: 300;
font-size: 110%;
padding: 0.8em 1em;
line-height: 1.2;
text-align: left;
left: auto;
margin-left: 4px;
position: absolute;
color: #fff;
background: #47a3da;
}
.container > header nav {
float: right;
text-align: center;
}
.container > header nav a {
display: inline-block;
position: relative;
text-align: left;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
margin: 0 0.1em;
border: 4px solid #47a3da;
}
.container > header nav a > span {
display: none;
}
.container > header nav a:hover:before {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
pointer-events: none;
}
.container > header nav a:hover {
background: #47a3da;
}
.cbp-hrmenu {
width: 100%;
margin-top: 2em;
border-bottom: 1px solid #47a3da;
border-top: 1px solid #47a3da;
}
/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-hrmenu > ul > li {
display: inline-block;
}
.cbp-hrmenu > ul > li > a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}
.cbp-hrmenu > ul > li.cbp-hropen {
display: block;
}
.cbp-hrmenu > ul > li > a:hover {
color: #47a3da;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #47a3da;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: relative;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Parent</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 2</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 2</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 3</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 3</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Parent 4</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Submenu 4</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<div style="display:block; height:500px">Lorem Ipsum</div>
关于javascript - 导航子菜单从顶部推送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33026346/