使点击下拉菜单下推内容 [英] Make drop down menu push content down on click
本文介绍了使点击下拉菜单下推内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在用户通过下拉菜单选择链接时下载我的内容。但是，点击时，下拉菜单会覆盖内容而不是将其压下。
我尝试过使用position：relatives / position：absolute等来实现某种所需结果，但没有这样的运气。我已经看到有关这个问题的其他类似问题，但它仍然没有帮助我。
解决此问题的任何帮助都将不胜感激。 > HTML
< body>
< nav class =navbar navbar-default navbar-static-top>
< div class =container-fluid>
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =＃>
< / a>
< / div>
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-navid =nav>
< li class =nav-link active>< a href =＃>连结< / a>< / li>
< li class =nav-link>< a href =＃>连结< / a>< / li>
< li class =nav-link>< a href =＃>连结< / a>< / li>
< li class =dropdown>
< ul class =dropdown-menuid =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 =＃>连结< / a>< / li>
< li class =nav-link>< a href =＃>连结< / a>< / li>
< / ul>
< / div>
< / div>
< / nav>
< div class =containerstyle =background：red; height：100px; width：100％;>
< / div>
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;
}
/ *按钮位置* /
.navbar-toggle {
margin-top：26px;
}
/ *折叠导航栏* /
.navbar-collapse {
margin-top：12px;
}
.site-logo {
max-width：135px;
min-width：120px;
}
.navbar-default .navbar-nav> li> a {
text-transform：大写;
background-color：#ffffff！important;
颜色：＃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;
颜色：＃ff5d1c;
bottom：-2px;
}
.nav> li {
position：static！important;
}
/ *对于navbar下拉菜单* /
.navbar .dropdown-menu {
min-width：1349px;
宽度：100％;
height：120px;
margin-top：51px;
z-index：1;
剩下：0;
text-align：center;
padding-right：10px;
位置：绝对;
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;
背景颜色：＃337ab7;
}
.dropdown-menu {
padding-left：10px;
padding-right：10px;
职位：亲属;
list-style-type：none;
}
.navbar .dropdown-menu li {
margin：0;
padding：0;
display：inline-block;
}
.dropdown-menu> li>一个{
颜色：#ffffff;
line-height：75px;
padding：3px;
}
.dropdown-menu> li> a：hover {
color：＃333333！important;
}
.dropdown-menu> li> a：hover {
color：#ffffff;
背景颜色：＃337ab7;
}
.m-pub {
display：inline-block;
margin：3px 40px 0;
font-size：13px;
font-weight：400;
text-transform：大写;
letter-spacing：.14em;
颜色：白色;
-webkit-transition：none;
-moz-transition：none;
-ms-transition：none;
-o-transition：none;
转换：无;
职位：亲属;
}
.m-pub：after，
.m-pub：focus {
color：#ffffff;
背景颜色：＃337ab7;
}
.dropdown-menu li .m-pub：hover：after {
content：'';
位置：绝对;
剩下：50％;
margin-left：-10px;
margin-top：55px;
border-left：0;
border-bottom：17px纯色透明;
border-top：17px纯透明;
border-left：14px solid＃333333;
transform：rotate（-90deg）;
背景：无;
}
我提供了一个jsfiddle：
JSFiddle
解决方案
你的问题如你猜测的那样，是定位。不幸的是，如果您使用 position：absolute ， .dropdown-menu 从文档流中移除，在它下面的任何东西之上，而不是将它移开。如果你使用 position：relative ，它会强制它的父级调整你的菜单的大小。据我所知，纯CSS没有解决这个问题的办法。然而，有一些解决方案使用javascript，并且由于JQuery已经被bootstrap使用，所以我们可以使用它。
为了在<点击code> dropdown-menu ，您需要更改 .container ，内容，本身或父/祖父元素下拉菜单是相对于。我选择添加 margin-bottom 祖父母，在这种情况下，它是 nav 元素。您可以轻松地将 margin-top 添加到 .container 。无论采用哪种方式，您都需要将边距设置为 .dropdown-menu 的高度，该高度设置为 120px 。我创建了以下规则来实现这一点：
nav.navbar.open {
margin-bottom：120px;
}
额外的类 .open li.dropdown 时，c>将由JQuery添加。我只是简单地用了一下JQuery来实现这个功能：
$（li.dropdown）。click（function（） {
$（nav.navbar）.toggleClass（open）;
}）;
这就是所需要的。点击 li.dropdown 时， .open 被添加到 nav 元素，它将底部边距增加到 .dropdown-menu 的相同高度。保证金不会影响 .dropdown-menu ，因为它是绝对定位的，而只是将 .container 压低 .dropdown-menu 未从文档流中移除。使用 li.dropdown 而不是＃menu-trigger （链接本身）的原因是因为如果您使用链接，然后点击 .dropdown-menu 菜单被解除，但保留余量。通过使用下拉菜单的父项，只要单击父项的子项，click事件仍会被注册。如果使用同级，那么触发器不会发生。
$（li.dropdown）。click（ function（）{$（nav.navbar）。toggleClass（open）;}）;
body {margin：0;填充：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; borderbar：solid 2px #eee;}。navbar-header {margin-top：-12px;}。navbar-brand {padding-top：0px！important;} / *按钮位置* /。navbar-toggle {margin -top：26px;} / *对于折叠的导航栏* /。navbar-collapse {margin-top：12px;}。site-logo {max-width：135px; min-width：120px;}。navbar-default .navbar-nav> li> {文本转换：大写; background-color：#ffffff！important;颜色：＃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;颜色：＃ff5d1c; bottom：-2px;}。nav> li {position：static！important;} / *对于导航栏下拉列表* /。navbar .dropdown-menu {min-width：1349px;宽度：100％; height：120px; margin-top：51px; z-index：1;左：0; text-align：center; padding-right：10px;位置：绝对; 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;位置：相对; list-style-type：none;}。navbar .dropdown-menu li {margin：0;填充：0; display：inline-block;}。dropdown-menu> li>一个{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;文字转换：大写; letter-spacing：.14em;白颜色; -webkit-transition：none; -moz-transition：none; -ms-transition：none; -o-transition：none;过渡：无; position：relative;}。m-pub：after，.m-pub：focus {color：#ffffff; background-color：＃337ab7;}。dropdown-menu li .m-pub：hover：after {content：'';位置：绝对;剩下：50％; margin-left：-10px; margin-top：55px; border-left：0; border-bottom：17px solid transparent;边框顶部：17px透明; border-left：14px solid＃333333; transform：旋转（-90deg）;背景：无;} nav.navbar.open {margin-bottom：120px;}
< HEAD> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css =stylesheet/>< / head>< body> < nav class =navbar navbar-default navbar-static-top> < div class =container-fluid> < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃>< / a> < / DIV> < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-navid =nav> < li class =nav-link active>< a href =＃>连结< / a> < /锂> < li class =nav-link>< a href =＃>连结< / a> < /锂> < li class =nav-link>< a href =＃>连结< / a> < /锂> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdownid =menu-trigger>下拉菜单< i class =fa fa-angle-down flip> < / I>< / A> < ul class =dropdown-menuid =menu> < li class =nav-link> < a href =＃class =m-pub>< i class =fa fa-microphone fa-2x>< / i> Option< / a> < /锂> < li class =nav-link> < a href =class =m-pub>< i class =fa fa-newspaper-o fa-2x>< / i> Option< / a> < /锂> < / UL> < /锂> < li class =nav-link>< a href =＃>连结< / a> < /锂> < li class =nav-link>< a href =＃>连结< / a> < /锂> < / UL> < / DIV> < / DIV> < / NAV> < div class =containerstyle =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>
这段代码足够小以至于可以使用移动视图，因此您需要查看它全屏。或者您可以查看 codepen 。
<请注意，为
.dropdown-menu 添加的一些样式打破了手机版本，因此您可能需要查看它们，或者添加一些媒体查询以修复它们。 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.
Any help in solving this problem would be greatly appreciated.
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
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
解决方案
Your issue, as you suspected, is the positioning. Unfortunately, if you use position: absolute, .dropdown-menu is 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: relative it 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.
In order to move the content down when dropdown-menu is clicked you need to change either .container, the content, itself, or the parent/grandparent element that the dropdown-menu is relative to. I chose to add margin-bottom the grandparent, which in this case, is the nav element. You could just as easily add margin-top to .container. Either way you need to set the margin equal to the height of .dropdown-menu which is set to 120px. I created the following rule to achieve this:
nav.navbar.open {
margin-bottom: 120px;
}
The extra class .open will be added by JQuery when li.dropdown is clicked. I just used this quick bit of JQuery to acomplish this:
$("li.dropdown").click(function() {
$("nav.navbar" ).toggleClass( "open");
});
That's all that is needed. When li.dropdown is clicked a .open is added to the nav element which increases its bottom margin to the same height of .dropdown-menu. The margin doesn't affect .dropdown-menu since it's absolutely positioned and instead only pushes down .container just as if .dropdown-menu was not removed from the document flow. The reason for using li.dropdown and not #menu-trigger (the link itself) is because if you use the link, and then click on .dropdown-menu the menu is dismissed, but the margin remains. By using the parent of dropdown-menu the 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").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.
As a note of caution, some of the stylings you have added for .dropdown-menu break the mobile version, so you may want to take a look at them, or add some media queries to fix them up a bit.
这篇关于使点击下拉菜单下推内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
