javascript - Bootstrap navbar, full height navbar-collapse but with weird animation - Stack Overflow

admin管理员组

文章数量:1315792

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.

Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?

I copied the code in this fiddle

body {
  padding-top: 53px;
}

.pids-navbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.pids-navbar-toggle .pids-icon-bar {
  display: block;
  width: 16px;
  height: 1px;
  border-radius: 1px;
}

.pids-navbar-toggle {
  margin-top: 14px;
  margin-bottom: 14px;
  margin-right: 0px;
  float: left;
}

.pids-navbar-nav {
  margin: 0px -15px;
  font-weight: lighter;
}

.pids-navbar-collapse {
  border: 0px;
  height: calc(100vh - 60px);
}
.full-height {
  height: 100%;
}

<script src=".1.1/jquery.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href=".3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest piled and minified JavaScript -->
<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>





<nav class="navbar navbar-default navbar-static-top pids-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
      <ul class="nav navbar-nav pids-navbar-nav full-height">
        <li class="active">
          <a href="#">Home 1</a>
        </li>
        <li class="">
          <a href="#">Home 2</a>
        </li>
        <li class="">
          <a href="#">Home 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.

Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?

I copied the code in this fiddle

body {
  padding-top: 53px;
}

.pids-navbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.pids-navbar-toggle .pids-icon-bar {
  display: block;
  width: 16px;
  height: 1px;
  border-radius: 1px;
}

.pids-navbar-toggle {
  margin-top: 14px;
  margin-bottom: 14px;
  margin-right: 0px;
  float: left;
}

.pids-navbar-nav {
  margin: 0px -15px;
  font-weight: lighter;
}

.pids-navbar-collapse {
  border: 0px;
  height: calc(100vh - 60px);
}
.full-height {
  height: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

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





<nav class="navbar navbar-default navbar-static-top pids-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
      <ul class="nav navbar-nav pids-navbar-nav full-height">
        <li class="active">
          <a href="#">Home 1</a>
        </li>
        <li class="">
          <a href="#">Home 2</a>
        </li>
        <li class="">
          <a href="#">Home 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Thanks!

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Nov 28, 2017 at 17:35 MickyMicky 74722 gold badges1313 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:

.navbar-collapse ul {
  height: 100vh;
}

note: I am using bootstrap 4.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.wrap {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
</head>
<body>

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="wrap">
    <a href="#">Home</a>
    <a href="#">Home 1</a>
    <a href="#">Home 2</a>
    <a href="#">Home 3</a>
  </div>
</div>


<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
    document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.height = "0%";
}
</script>

</body>
</html>

本文标签： javascriptBootstrap navbarfull height navbarcollapse but with weird animationStack Overflow