Jack Sewell Jack Sewell - 1 month ago 7
CSS Question

How can I animate this?

Okay so I have made a simple hamburger drop down menu for my site. I have it set to display none then when the toggle button is clicked to add a class which sets display to block.

I know the display property cannot be animated but I don't know how else I could achieve the same thing without using the display property.

HTML:

<nav class="top-navigation" role="navigation" id="top-navigation">

<div class="container">

<div class="top-navigation_header">

<button class="top-navigation-toggle" id="menu-toggle">
<span class="toggle_bars"></span>
<span class="toggle_bars"></span>
<span class="toggle_bars"></span>
</button>

<img src="//placehold.it/200x100" alt="Logo">

</div>

<ul class="top-navigation_menu" id="menu">

<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>

</ul>

</div>

</nav>


CSS:

.top-navigation {
position: fixed;
width: 100%;
z-index: 10; }
.top-navigation:after, .top-navigation:before {
content: "";
display: table; }
.top-navigation:after {
clear: both; }

.top-navigation_header {
float: left;
padding: 24px 16px; }
.top-navigation_header img {
width: 100px;
float: left; }

.top-navigation_menu {
float: right;
color: #FFFFFF; }
.top-navigation_menu li {
display: inline-block;
margin: 20px 0; }
.top-navigation_menu li a {
display: block;
padding: 16px;
text-transform: uppercase;
font-size: 13px; }

.collapse {
display: block !important; }

.top-navigation-toggle {
display: none;
background-color: transparent;
border: 0px;
outline: 0px;
margin: 0px;
padding: 16px;
cursor: pointer;
float: right;
z-index: 2; }
.top-navigation-toggle .toggle_bars {
display: block;
width: 18px;
height: 2px;
margin: 4px 0;
background-color: #FFFFFF; }

@media screen and (max-width: 700px) {
.top-navigation {
background-color: #363636; }

.top-navigation_header {
width: 100%; }
.top-navigation_header img {
width: 100px;
float: left; }

.top-navigation_menu {
display: none;
float: left;
width: 100%; }
.top-navigation_menu li {
display: block;
margin: 20px 0; }
.top-navigation_menu li a {
display: block;
padding: 16px;
text-transform: uppercase;
font-size: 13px; }

.top-navigation-toggle {
display: block; } }


JavaScript:

var menu = document.getElementById("menu");
var toggleButton = document.getElementById("menu-toggle");

function toggleMenu() {
menu.classList.toggle("collapse");
}

toggleButton.addEventListener("click", toggleMenu);

Answer

Remove display property as a start. Since you can't animate height to auto with css3, I would suggest you to go with the max-height hack:

.top-navigation {
max-height:102px;
overflow:hidden;
transition:0.2s all ease;
}
.collapse{max-height:1000px;}

And then with javascript:

var topnavigation = document.getElementById("top-navigation");
var toggleButton = document.getElementById("menu-toggle");

function toggleMenu() {
    topnavigation.classList.toggle("collapse");
}

toggleButton.addEventListener("click", toggleMenu);

A complete working example:

var topnavigation = document.getElementById("top-navigation");
    var toggleButton = document.getElementById("menu-toggle");

    function toggleMenu() {
        topnavigation.classList.toggle("collapse");
    }

    toggleButton.addEventListener("click", toggleMenu);
.top-navigation {
  position: fixed;
  width: 100%;
  z-index: 10;
  max-height:102px;
overflow:hidden;
transition:0.5s all ease;
  }
  .collapse{max-height:1000px;}
  .top-navigation:after, .top-navigation:before {
    content: "";
    display: table; }
  .top-navigation:after {
    clear: both; }

.top-navigation_header {
  float: left;
  padding: 24px 16px;
  box-sizing: border-box;
}
  .top-navigation_header img {
    width: 100px;
 
    float: left; }

.top-navigation_menu {
  float: right;
  color: #FFFFFF; }
  .top-navigation_menu li {
    display: inline-block;
    margin: 20px 0; }
    .top-navigation_menu li a {
      display: block;
      padding: 16px;
      text-transform: uppercase;
      font-size: 13px; }

.collapse {
  display: block !important; }

.top-navigation-toggle {
  display: none;
  background-color: transparent;
  border: 0px;
  outline: 0px;
  margin: 0px;
  padding: 16px;
  cursor: pointer;
  float: right;
  z-index: 2; }
  .top-navigation-toggle .toggle_bars {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px 0;
    background-color: #FFFFFF; }

@media screen and (max-width: 700px) {
  .top-navigation {
    background-color: #363636; }

  .top-navigation_header {
    width: 100%; }
    .top-navigation_header img {
      width: 100px;
      float: left; }

  .top-navigation_menu {
    float: left;
    width: 100%; }
    .top-navigation_menu li {
      display: block;
      margin: 20px 0; }
      .top-navigation_menu li a {
        display: block;
        padding: 16px;
        text-transform: uppercase;
        font-size: 13px; }

  .top-navigation-toggle {
    display: block; } }
<nav class="top-navigation" role="navigation" id="top-navigation">

    <div class="container">

        <div class="top-navigation_header">

            <button class="top-navigation-toggle" id="menu-toggle">
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
                <span class="toggle_bars"></span>
            </button>

            <img src="//placehold.it/200x100" alt="Logo">

        </div>

    <ul class="top-navigation_menu" id="menu">

        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a></li>

    </ul>

    </div>

</nav>