CSS Bootstrap 折叠菜单在展开时不会向下推内容

Question

提问by thairish

I am using Twitter Bootstrap to play around with the responsive side of a website. I am having a problem however with the smaller widths where the collapsed menu is going over the content of the page, rather than pushing it down.

我正在使用 Twitter Bootstrap 来处理网站的响应端。但是，我遇到了折叠菜单越过页面内容而不是将其向下推的较小宽度的问题。

I used this example to build my navigation:

我用这个例子来构建我的导航：

http://getbootstrap.com/examples/navbar-fixed-top/

Looking at the example, it doesn't push the content down either.

查看示例，它也不会将内容向下推。

I've seen some answers to this to use padding on the body, but this has not worked for me. I've also tried putting overflow on some elements but its made no difference.

我已经看到了一些关于在身体上使用填充的答案，但这对我不起作用。我也试过在某些元素上设置溢出，但没有任何区别。

My code for the navigation is:

我的导航代码是：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <h1 class="logo-title">
            <a href="index.html"><span>Logo</span></a>
        </h1>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

I'm new to Responsive Design and have seen many websites with the collapsed menu pushing down the content. Is it good practice to have collapsed menus like this or is it a pure preference thing?

我是响应式设计的新手，见过很多网站的折叠菜单将内容向下推。像这样折叠菜单是一种好习惯还是纯粹的偏好？

My main question is how can I get the content to be pushed when the collapsed menu is active?

我的主要问题是如何在折叠菜单处于活动状态时推送内容？

Thank you in advance for the help.

预先感谢您的帮助。

Answer 1

采纳答案by Bruno

I don't know. This seems to work... (kind of a hack though).

我不知道。这似乎有效......（虽然有点黑客）。

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}

Answer 2

回答by James

If you are using a fixednavbar expanding the menu won't push down the content. For that you have to use staticheader itself. Check the bootstrap example link you gave as reference.

如果您使用fixed导航栏展开菜单将不会下推内容。为此，您必须使用static标头本身。检查您作为参考提供的引导程序示例链接。

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">

Answer 3

回答by mbrrw

There are many ways you could do that.

有很多方法可以做到这一点。

One would be to toggle a class on .containeror whatever element wraps your content below the navigation.

一种方法是.container在导航下方打开一个类或任何将您的内容包装起来的元素。

For example:

例如：

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}

Answer 4

回答by AwesomeHymanify

part 1: What I did was wrap all the elements you want to move

第 1 部分：我所做的是包装您要移动的所有元素

var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

form {
  max-width: 500px;
  margin: 0px auto;
  text-align: center;
}

input, textarea {
  border: 3px solid #f47909;
  padding-bottom: 10px;
}

input:focus, textarea:focus {
  outline: none;
  border: 3px solid #f2a25a;
}

label {
  display: block;
  margin-bottom: 20px;
}

span {
  display: block;
}

textarea {
  max-height: 200px;
  height: 200px;
  width: 300px;
  max-width: 300px;
}


/*rest same as index.css*/

*{
  font-family: 'futura';
}

.navvy {
  border-radius: 0px;
  margin: 0px;
  height: 70px;
  padding-top: 5px;
}

@media screen and (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    li{
      padding-right: 30px;
      font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-collapse {
      margin-top: 15px;
      background-color: #FAFAFA;
    }
    li {
      font-size: 17px;
    }
}

.icon-bar {
  background-color: #337ab7;
}

.icon-bar-light {
  background-color: #23527C;
}

#li-back:hover {
  background-color: #FAFAFA;
  font-size: 20px;
  font-weight: bolder;
}

.navbar-brand {
  font-size: 25px;
  color: #1d78c6;
}

#footer {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 2px dotted #8bc771;
  text-align: center;
}

#description {
  margin-top: 20px;
  text-align: center;
  font-size: 30px;
}

.push{
  transition: transform 0.5s;
  transform: translate(0px, 160px);
}

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

<!doctype html>
<html lang="en">
<head>
    <title>VirusFun</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

    <link rel="stylesheet" href="/css/contacts.css" type="text/css">

</head>
<body>
  <div class="introPic">

  </div>
  <nav class="navbar navbar-default navbar-static-top navvy">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <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="index.html">Virus Fun</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
        <ul class="nav navbar-nav">
          <li><a id="li-back" href="index.html">Home</a></li>
          <li><a id="li-back" href="gallery.html">Gallery</a></li>
          <li><a id="li-back" href="#">About</a></li>
          <li><a id="li-back" href="contacts.html">Contacts</a></li>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div id="push" class="">
    <!--The blurb -->
    <p id="description">Ask whatever you want!</p>

    <!-- The body -->
    <div class="container-fluid">
      <form action="https://formspree.io/[email protected]"
        method="POST">

        <div class="row">
          <div class="col-sm-6 col-xs-6">
            <label id="name">
              <span>Your Name</span>
              <input tabindex="1" placeholder="John Smith" type="text" name="name">
            </label>
          </div>
          <div class="col-sm-6 col-xs-6">
            <label id="email">
              <span>Your Email</span>
              <input tabindex="2" placeholder="[email protected]" type="email" name="Sender">
            </label>
          </div>
        </div>

        <label>
          <span>Your Message</span>
            <textarea tabindex="3" name="message"></textarea>
        </label>
        <div class="send">
            <input tabindex="4" type="submit" value="Send">
        </div>
      </form>
    </div>
    <footer id="footer">
        <p>? 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
    </footer>
  </div>

    <!--need this code to be declared before javascript-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="/javascript/javascript.js"></script>

    <script src="jquery/jquery-3.1.1.min.js"></script>

</body>
</html>

with a div Then give it an id which we will get elements by id later with javascript After that make an empty class in the same div

用一个 div 然后给它一个 id，我们稍后将使用 javascript 通过 id 获取元素之后在同一个 div 中创建一个空类

part 2: Go to your css and add a transition. Don't worry, if you don't know I have the source code here--->

第 2 部分：转到您的 css 并添加过渡。别担心，如果你不知道我这里有源代码--->

.push{
    transition: transform 0.5s;
    transform: translate(0px, 160px);
}

Although this class is not in the div with the id yet, javascript will handle this soon. tip: If you want to get fancy with how the elements will revert back to orignial position, add another transition for when it will come back up--->

虽然这个类还没有在带有 id 的 div 中，但 javascript 很快就会处理这个问题。提示：如果您想了解元素如何恢复到原始位置，请添加另一个过渡以了解它何时恢复--->

.pushUp{
  transition: transform 0.5s;
  transform: translate(0px, 0px);
}

The translate measurements are based on twitter bootstrap collapse menu with 4 elements inside.

翻译测量基于 twitter bootstrap 折叠菜单，里面有 4 个元素。

part 3: The javascript! Find the button for the collapse menu. Should look like this-->

第 3 部分：javascript！找到折叠菜单的按钮。应该是这样的-->

<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">'

As you can see something is different from the getbootstrap.com example. I have added an icon-bars class. This is so I can find it with-->

正如您所看到的，与 getbootstrap.com 示例有所不同。我添加了一个图标栏类。这样我就可以找到它-->

var icon = document.getElementsByClassName("icon-bars");

You will also need to find the div which wraps the elements needed to be pushed down.

您还需要找到包装需要向下推的元素的 div。

var pushDown = document.getElementById("push");

Now this is the juicy part!

现在这是多汁的部分！

I am going to show you how to do it in jquery. Here's the code and the explanation is at the bottom--->

我将向您展示如何在 jquery 中做到这一点。这是代码，解释在底部--->

$(document).ready(function(){
  $(icon[0]).click(function(){
    if($(pushDown).hasClass("push")){
      pushDown.className = "pushUp";
    }
    else{
      pushDown.className = "push";
    }
  })
});

Explanation: -First of we declare this is jquery.

说明：-首先我们声明这是jquery。

-Then I will check whether the toggle collapse button is clicked, by adding the event handler of click to the first element in the icon list. Because I created only one icon-bars class, the first element of the list will always be the one I targeted.

- 然后我将通过将 click 事件处理程序添加到图标列表中的第一个元素来检查是否单击了切换折叠按钮。因为我只创建了一个 icon-bars 类，列表的第一个元素将始终是我的目标元素。

-Next, I will check if I should make the elements slide up or down depending on if the classes match the conditional statements. Don't need much explaining on the logic as it is pretty straightforward even if you have never tried the hasClass func.

-接下来，我将根据类是否与条件语句匹配来检查是否应该使元素向上或向下滑动。不需要对逻辑进行太多解释，因为即使您从未尝试过 hasClass 函数，它也非常简单。

Thats it.

就是这样。

Butt....... It is not good yet. There is a bug where if you double click the toggle button, the collapse menu transition has not yet finished so our push transition goes back up reversing the order. Try it here. Hope there will be some help.

屁股……还没好呢。有一个错误，如果您双击切换按钮，折叠菜单转换尚未完成，因此我们的推送转换会返回颠倒顺序。在这里试试。希望会有一些帮助。

ps. Ignore all the styling in my snippet

附：忽略我的代码段中的所有样式

-Hyman beginner front end web developer

-Hyman 初学者前端 Web 开发人员

Answer 5

回答by Jorge Casariego

In my case, it worked changing this

就我而言，它改变了这一点

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

for this

为了这

<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">

and editing my css from this:

并从此编辑我的css：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 70px 0 30px 0px;
}

to this:

对此：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

Answer 6

回答by Callat

navbar-fixed-top.

Having this prevents the pushdown native property of the accordion. You have to massage it out with your own javascript or css.

这样做可以防止手风琴的下推本机属性。你必须用你自己的 javascript 或 css 来按摩它。

Answer 7

回答by mn128b

Also to avoid the white space created below the navbar, add the following line to the first "div" after the navbar, e.g: jumborton

同样为了避免在导航栏下方创建空白，将以下行添加到导航栏后的第一个“div”，例如：jumborton

.jumbotron {
    margin-top: -20px;
}

Answer 8

回答by Khyati Chandak

Mention one "id" in data-targetand add that "id" in the "div" which have collapse navbar code. As below:

在其中提及一个“id”data-target并在具有折叠导航栏代码的“div”中添加该“id”。如下：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h1 class="logo-title">
                <a href="index.html"><span>Logo</span></a>
            </h1>
          </div>
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.html">item1</a></li>
              <li><a href="#">item2</a></li>
              <li><a href="#">item3</a></li>
              <li><a href="#">item4</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

This data-targetcalls a particular "id" and on the base of that your navbar will toggle.

这会data-target调用一个特定的“id”，并在此基础上您的导航栏将切换。

Answer 9

回答by MattyIce

THIS WORKS!!

这有效！！

Had the same issue and all the answers here revert to a static nav bar which is not what you're looking for.

有同样的问题，这里的所有答案都恢复为静态导航栏，这不是您要找的。

Throw a blank div tag (with height) after the nav bar but before the start of your content. This empty div pushes the content down and remains hidden behind the nav bar. Use javascript/jquery to toggle on the div for the two mobile widths.

在导航栏之后但在内容开始之前抛出一个空白的 div 标签（带有高度）。这个空的 div 将内容向下推并保持隐藏在导航栏后面。使用 javascript/jquery 切换两个移动宽度的 div。

HTML

</nav>
<div class="container main">
<div id="pushContent"></div>

CSS

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

Javascript/jquery

Javascript/jQuery

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

CSS Bootstrap 折叠菜单在展开时不会向下推内容

提问by thairish

采纳答案by Bruno

回答by James

回答by mbrrw

回答by AwesomeHymanify

回答by Jorge Casariego

回答by Callat

回答by mn128b

回答by Khyati Chandak

回答by MattyIce

相关推荐

最近更新

标签

CSS Bootstrap 折叠菜单在展开时不会向下推内容

提问by thairish

采纳答案by Bruno

回答by James

回答by mbrrw

回答by AwesomeHymanify

回答by Jorge Casariego

回答by Callat

回答by mn128b

回答by Khyati Chandak

回答by MattyIce

相关推荐

CSS 纯css中的跨浏览器文本渐变而不使用背景图像

CSS 你能模糊div下面/后面的内容吗？

在 CSS 中指定与父 DIV 相关的精确百分比宽度

CSS Bootstrap 3 - 移动设备上的桌面视图

相关推荐

最近更新

标签