javascript - Animate navbar collapse using pure JS & CSS -

i want remove jquery bootstrap template don't use js components. removed , added fallback code navbar-toggle in pure js (check attatched jsfiddle). want animate navbar toggle (using css or pure js).

i tried transition property max-height. don't know final height there's dropdown inside. if use big height, collapse delayed.

i have created jsfiddle using example template getbootstrap: https://jsfiddle.net/c5f82stw/

// navbar , dropdowns  var toggle = document.getelementsbyclassname('navbar-toggle')[0],    collapse = document.getelementsbyclassname('navbar-collapse')[0],    dropdowns = document.getelementsbyclassname('dropdown');;    // toggle if navbar menu open or closed  function togglemenu() {    collapse.classlist.toggle('collapse');    collapse.classlist.toggle('in');  }    // close dropdown menus  function closemenus() {    (var j = 0; j < dropdowns.length; j++) {      dropdowns[j].getelementsbyclassname('dropdown-toggle')[0].classlist.remove('dropdown-open');      dropdowns[j].classlist.remove('open');    }  }    // add click handling dropdowns  (var = 0; < dropdowns.length; i++) {    dropdowns[i].addeventlistener('click', function() {      if (document.body.clientwidth < 768) {        var open = this.classlist.contains('open');        closemenus();        if (!open) {          this.getelementsbyclassname('dropdown-toggle')[0].classlist.toggle('dropdown-open');          this.classlist.toggle('open');        }      }    });  }    // close dropdowns when screen becomes big enough switch open hover  function closemenusonresize() {    if (document.body.clientwidth >= 768) {      closemenus();      collapse.classlist.add('collapse');      collapse.classlist.remove('in');    }  }    // event listeners  window.addeventlistener('resize', closemenusonresize, false);  toggle.addeventlistener('click', togglemenu, false);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">      <!-- static navbar -->    <nav class="navbar navbar-default">      <div class="container-fluid">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">                <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="#">project name</a>        </div>        <div id="navbar" class="navbar-collapse collapse">          <ul class="nav navbar-nav">            <li class="active"><a href="#">home</a></li>            <li><a href="#">about</a></li>            <li><a href="#">contact</a></li>            <li class="dropdown">              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>              <ul class="dropdown-menu">                <li><a href="#">action</a></li>                <li><a href="#">another action</a></li>                <li><a href="#">something else here</a></li>                <li role="separator" class="divider"></li>                <li class="dropdown-header">nav header</li>                <li><a href="#">separated link</a></li>                <li><a href="#">one more separated link</a></li>              </ul>            </li>          </ul>          <ul class="nav navbar-nav navbar-right">            <li class="active"><a href="./">default <span class="sr-only">(current)</span></a></li>            <li><a href="../navbar-static-top/">static top</a></li>            <li><a href="../navbar-fixed-top/">fixed top</a></li>          </ul>        </div>        <!--/.nav-collapse -->      </div>      <!--/.container-fluid -->    </nav>      <!-- main component primary marketing message or call action -->    <div class="jumbotron">      <h1>navbar example</h1>      <p>this example quick exercise illustrate how default, static navbar , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p>      <p>        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">view navbar docs &raquo;</a>      </p>    </div>    </div>  <!-- /container -->

i know not want wanted. looking js.

fine tune max-height needs. , dropdown need height work. keep in mind.

.navbar-collapse.in       max-height: 65em; 

jsfiddle: https://jsfiddle.net/g3hwf2yo/2/

.navbar-collapse{     max-height: 0px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); background: #d5d5d5; overflow: hidden; display: block;     margin-top: 0.5em; } .navbar-collapse.in {      max-height: 65em;     transition: max-height 1s ease-in-out; } 

this uses cubic bezier fine tune animation.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container">    <!-- static navbar -->   <nav class="navbar navbar-default">     <div class="container-fluid">       <div class="navbar-header">         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">               <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="#">project name</a>       </div>       <div id="navbar" class="navbar-collapse collapse">         <ul class="nav navbar-nav">           <li class="active"><a href="#">home</a></li>           <li><a href="#">about</a></li>           <li><a href="#">contact</a></li>           <li class="dropdown">             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a>             <ul class="dropdown-menu">               <li><a href="#">action</a></li>               <li><a href="#">another action</a></li>               <li><a href="#">something else here</a></li>               <li role="separator" class="divider"></li>               <li class="dropdown-header">nav header</li>               <li><a href="#">separated link</a></li>               <li><a href="#">one more separated link</a></li>             </ul>           </li>         </ul>         <ul class="nav navbar-nav navbar-right">           <li class="active"><a href="./">default <span class="sr-only">(current)</span></a></li>           <li><a href="../navbar-static-top/">static top</a></li>           <li><a href="../navbar-fixed-top/">fixed top</a></li>         </ul>       </div>       <!--/.nav-collapse -->     </div>     <!--/.container-fluid -->   </nav>    <!-- main component primary marketing message or call action -->   <div class="jumbotron">     <h1>navbar example</h1>     <p>this example quick exercise illustrate how default, static navbar , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p>     <p>       <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">view navbar docs &raquo;</a>     </p>   </div>  </div> <!-- /container --> 

finally js

// navbar , dropdowns var toggle = document.getelementsbyclassname('navbar-toggle')[0],   collapse = document.getelementsbyclassname('navbar-collapse')[0],   dropdowns = document.getelementsbyclassname('dropdown');;  // toggle if navbar menu open or closed function togglemenu() {   collapse.classlist.toggle('collapse');   collapse.classlist.toggle('in'); }  // close dropdown menus function closemenus() {   (var j = 0; j < dropdowns.length; j++) {     dropdowns[j].getelementsbyclassname('dropdown-toggle')[0].classlist.remove('dropdown-open');     dropdowns[j].classlist.remove('open');   } }  // add click handling dropdowns (var = 0; < dropdowns.length; i++) {   dropdowns[i].addeventlistener('click', function() {     if (document.body.clientwidth < 768) {       var open = this.classlist.contains('open');       closemenus();       if (!open) {         this.getelementsbyclassname('dropdown-toggle')[0].classlist.toggle('dropdown-open');         this.classlist.toggle('open');       }     }   }); }  // close dropdowns when screen becomes big enough switch open hover function closemenusonresize() {   if (document.body.clientwidth >= 768) {     closemenus();     collapse.classlist.add('collapse');     collapse.classlist.remove('in');   } }  // event listeners window.addeventlistener('resize', closemenusonresize, false); toggle.addeventlistener('click', togglemenu, false); 

have nice day!