html - 使下拉菜单在单击时向下推送内容

标签 html css

每当用户选择带有下拉菜单的链接时，我都会尝试下推我的内容。但是，当单击时，下拉菜单会覆盖内容而不是将其向下推。

我曾尝试使用 position: relatives/position: absolute 等来达到某种预期的结果，但没有这样的运气。我已经看到与此问题有关的其他类似问题，但它仍然没有帮助我。

如果能帮助解决这个问题，我们将不胜感激。

我的 HTML 和 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" crossorigin="anonymous"></script>

<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>

</body>

我提供了一个 jsfiddle: JSFiddle

最佳答案

正如您所怀疑的，您的问题是定位。不幸的是，如果您使用 position: absolute，.dropdown-menu 会从文档流中移除，最终会出现在其下方的任何内容之上，而不是将其移出道路。如果您使用 position: relative，它会强制其父级调整大小，从而弄乱您的菜单。据我所知，纯 CSS 无法解决此问题。但是，有一些使用 javascript 的解决方案，并且由于 bootstrap 已经使用了 JQuery，我们可以直接使用它。

为了在单击 dropdown-menu 时向下移动内容，您需要更改 .container、内容本身或父/祖父元素dropdown-menu 是相对的。我选择添加 margin-bottom 祖 parent 元素，在本例中是 nav 元素。您可以轻松地将 margin-top 添加到 .container。无论哪种方式，您都需要将边距设置为等于 .dropdown-menu 的高度，它被设置为 120px。我创建了以下规则来实现这一点:

nav.navbar.open {
  margin-bottom: 120px;
}

当点击 li.dropdown 时，JQuery 将添加额外的类 .open。我只是使用了这个快速的 JQuery 来完成这个:

$("li.dropdown").click(function() {
  $("nav.navbar" ).toggleClass( "open");
});

这就是所有需要的。当 li.dropdown 被点击时，一个 .open 被添加到 nav 元素，它增加了它的底部边距到与 相同的高度。下拉菜单。边距不影响 .dropdown-menu 因为它是绝对定位的，而只是向下推 .container 就像 .dropdown-menu 是未从文档流中删除。使用 li.dropdown 而不是 #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>

该代码段足够小，可以在移动设备上显示，因此您需要全屏查看。或者您可以查看 codepen .

请注意，您为 .dropdown-menu 添加的一些样式破坏了移动版本，因此您可能需要查看它们，或者添加一些媒体查询到稍微修复一下。

关于html - 使下拉菜单在单击时向下推送内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31497639/

上一篇：javascript - Bootstrap : How to collapse a wrapper div without jumping?

下一篇：html - 如何删除将鼠标悬停在图像上时出现的缩放图标？

相关文章：

html - 使 div 在小屏幕下方

javascript - 如何在div内容中显示另一个html

html - 滚动不会进入移动 View ，因为内容大小很小

android - 使用 iframe 自动播放 YouTube 不适用于 Android 和 iPhone

php 使用表单重定向

css - 在同一行中，有一个中心元素和最右边的元素

css - Firefox 过滤灰度和打印

html - 在网页上嵌入最新的YouTube上传

javascript - 添加 API 后显示灰色框的 Google map 无法正常工作

javascript - d3.js 对象未完全显示在卡片内

©2024 IT工具网  联系我们