Html 使下拉菜单在点击时下推内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31497639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make drop down menu push content down on click
提问by user2538755
I am trying to push down my content whenever a user selects a links with a drop down menu. However, when clicked the dropdown goes over the content rather than pushes it down.
每当用户选择带有下拉菜单的链接时，我都会尝试下推我的内容。但是，当点击下拉菜单时，它会越过内容而不是将其向下推。
I have tried using position: relatives/position: absolute, etc to achieve some sort of desired result, but no such luck. I have seen other similar questions pertaining to this problem but it still has not helped me.
我曾尝试使用 position: relatives/position: absolute 等来达到某种预期的结果，但没有这样的运气。我已经看到与此问题有关的其他类似问题，但它仍然没有帮助我。
Any help in solving this problem would be greatly appreciated.
任何解决此问题的帮助将不胜感激。
HTML
HTML
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>
</li>
<li class="nav-link">
<a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>
</li>
</ul>
</li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
CSS
CSS
body {
margin: 0;
padding: 0;
font-family: "Helvetica","Arial",sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav > li > a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav > li > a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width:1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index:1;
left: 0;
text-align: center;
padding-right:10px;
position: absolute;
list-style-type:none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left:10px;
padding-right:10px;
position:relative;
list-style-type:none;
}
.navbar .dropdown-menu li {
margin:0;
padding:0;
display: inline-block;
}
.dropdown-menu > li > a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu > li > a:hover {
color: #333333 !important;
}
.dropdown-menu > li > a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus{
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}
I have provided a jsfiddle: JSFiddle
我提供了一个 jsfiddle： JSFiddle
回答by David Mann
Your issue, as you suspected, is the positioning. Unfortunately, if you use position: absolute, .dropdown-menuis removed from the flow of the document, winding up on top of anything beneath it rather than moving it out of the way. If you use position: relativeit forces it's parent to resize messing up your menu. As far as I know there is no solution to this problem with pure CSS. However, there is a few solutions with javascript, and since JQuery is already being used by bootstrap, we can just use that.
正如您所怀疑的，您的问题是定位。不幸的是，如果您使用position: absolute,.dropdown-menu会从文档流中移除，它会缠绕在其下方的任何内容之上，而不是将其移开。如果您使用position: relative它，它会强制它的父级调整大小，从而弄乱您的菜单。据我所知，纯 CSS 无法解决这个问题。但是，有一些使用 javascript 的解决方案，并且由于引导程序已经使用了 JQuery，因此我们可以使用它。
In order to move the content down when dropdown-menuis clicked you need to change either .container, the content, itself, or the parent/grandparent element that the dropdown-menuis relative to. I chose to add margin-bottomthe grandparent, which in this case, is the navelement. You could just as easily add margin-topto .container. Either way you need to set the margin equal to the height of .dropdown-menuwhich is set to 120px. I created the following rule to achieve this:
为了在dropdown-menu单击时向下移动内容，您需要更改.container、内容本身或 相对于的父/祖父元素dropdown-menu。我选择添加margin-bottom祖父母，在这种情况下，是nav元素。您可以轻松添加margin-top到.container. 无论哪种方式，您都需要将边距设置为等于其高度.dropdown-menu设置为120px. 我创建了以下规则来实现这一点：
nav.navbar.open {
margin-bottom: 120px;
}
The extra class .openwill be added by JQuery when li.dropdownis clicked. I just used this quick bit of JQuery to acomplish this:
单击.open时，JQuery 将添加额外的类li.dropdown。我只是用这个快速的 JQuery 来完成这个：
$("li.dropdown").click(function() {
$("nav.navbar" ).toggleClass( "open");
});
That's all that is needed. When li.dropdownis clicked a .openis added to the navelement which increases its bottom margin to the same height of .dropdown-menu. The margin doesn't affect .dropdown-menusince it's absolutely positioned and instead only pushes down .containerjust as if .dropdown-menuwas not removed from the document flow. The reason for using li.dropdownand not #menu-trigger(the link itself) is because if you use the link, and then click on .dropdown-menuthe menu is dismissed, but the margin remains. By using the parent of dropdown-menuthe click event is still registered whenever a child of the parent is clicked. If a sibling is used then the trigger doesn't happen.
这就是所需要的。当li.dropdown点击一个.open被加入到nav这增加其底部余量的相同的高度元件.dropdown-menu。边距不会影响，.dropdown-menu因为它是绝对定位的，而只是向下推，.container就像.dropdown-menu没有从文档流中删除一样。使用li.dropdownand not的原因#menu-trigger（链接本身）是因为如果使用了链接，然后点击.dropdown-menu菜单被解散，但边距依然存在。通过使用dropdown-menu单击事件的父级，无论何时单击父级的子级，仍会注册该事件。如果使用了兄弟姐妹，则触发器不会发生。
$("li.dropdown").click(function() {
$("nav.navbar").toggleClass("open");
});body {
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav > li > a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav > li > a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width: 1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index: 1;
left: 0;
text-align: center;
padding-right: 10px;
position: absolute;
list-style-type: none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left: 10px;
padding-right: 10px;
position: relative;
list-style-type: none;
}
.navbar .dropdown-menu li {
margin: 0;
padding: 0;
display: inline-block;
}
.dropdown-menu > li > a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu > li > a:hover {
color: #333333 !important;
}
.dropdown-menu > li > a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus {
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}
nav.navbar.open {
margin-bottom: 120px;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>
</li>
<li class="nav-link">
<a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>
</li>
</ul>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>The snippet is small enough that it engages the mobile view, so you'll need to view it in full screen. Or you can check out the codepen.
该代码段足够小，可以用于移动视图，因此您需要全屏查看。或者您可以查看codepen。
As a note of caution, some of the stylings you have added for .dropdown-menubreak the mobile version, so you may want to take a look at them, or add some media queries to fix them up a bit.
需要注意的是，您为.dropdown-menu破坏移动版本而添加的一些样式，因此您可能需要查看它们，或添加一些媒体查询来修复它们。
