CODEWITHSUNDEEP
javascripthtmlcss
Jack Sewell
Jack Sewell

Reputation: 118

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

Upvotes: 1

Views: 50

Answers (1)

G&#246;khan Mete ERT&#220;RK
G&#246;khan Mete ERT&#220;RK

Reputation: 4976

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>

Upvotes: 1

Related Questions