CODEWITHSUNDEEP
javascripthtmlcssanimation
grhu
grhu

Reputation: 470

JavaScript animate sliding menu

I have a simple script that opens up a menu when a button is clicked, and then clicking another button closes it. How can I animate it? I've tried with "transition" in property, but it's not working.

Here is the JS code:

var menu = document.getElementById("menu");
var opener = document.getElementById("opener");
var closer = document.getElementById("closer");
var title = document.getElementById("title");

function openMenu() {
    menu.style.width = "320px";
    menu.style.display = "block";
    title.style.display = "none";
}
function closeMenu() {
    menu.style.width = "0";
    menu.style.display = "none";
    title.style.display = "block";
}

opener.addEventListener("click", openMenu);
closer.addEventListener("click", closeMenu);

And HTML:

<div id="title" class="title col-xs-12">
        <span id="opener" class="title__opener icon-menu"></span>
        <h4><strong>...</strong></h4>
    </div>
    <section id="menu" class="menu-panel col-xs-12 col-sm-3">  
        <h1><a href="index.html">...</a></h1>
        <span id="closer" class="menu-panel__closer icon-cancel"></span>
        <nav class="menu-panel__nav">
            <ul class="menu-panel__menu">
                <li><button id="allItems">Wszystkie prace</button></li>
                <li><button id="drawings">Rysunki</button></li>
                <li><button id="projects">Projekty</button></li>
                <li><ul class="menu-panel__contact">
                    <li><p class="menu-panel__header">Kontakt :</p></li>
                    <li><a href="tel:..."><span class="icon-phone"></span>...</a></li>
                    <li><a href="mailto:..."><span class="icon-mail-alt"></span>...</a></li>
                </ul></li>
            </ul>
        </nav> 
        <footer class="menu-panel__footer">
            <a href="">&copy; 2017 </a>
        </footer>
    </section>

In CSS I have:

.menu-panel {
    overflow: hidden;
    width: 0;
    display: none;
    transition: 0.3s all;}

JavaScript animations is something that I can't get my head around, and I don't want to use jQuery yet. I will be thankful for any help.

Upvotes: 0

Views: 2676

Answers (3)

Fatih Ertuğral
Fatih Ertuğral

Reputation: 347

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Animation Sliding</title>
   <style>
      #box {
         width: 300px;
         height: 300px;
         background: black;
         transition: width .5s;
      }

      #box.open {
         width: 500px;
      }
   </style>
</head>

<body>
   <div id="box"></div>
   <button id="btn">Test</button>
</body>

<script lang="javasciprt">
   function haha() {
      const box = document.getElementById('box');
      box.classList.toggle('open')
   }
   const btn = document.getElementById('btn');
   btn.addEventListener('click', haha);
</script>

</html>

Without using the toggle method.

function haha() {
   const box = document.getElementById('box');

   box.className.includes('open')
   ? box.classList.remove('open')
   : box.classList.add('open');
}
const btn = document.getElementById('btn');
btn.addEventListener('click', haha);

Upvotes: 0

rinatoptimus
rinatoptimus

Reputation: 421

Try this variant in pure Javascript as well: https://jsfiddle.net/rinatoptimus/wwn4bxwj/ Added 

function test() {
    document.getElementById('menu').classList.toggle('menu-panel');
}
document.getElementById('opener').addEventListener("click", test);

and some styles.

Upvotes: 0

Tienou
Tienou

Reputation: 720

You could usse classList.toggle() to toggle your menu

const menu = document.querySelector('.menu');
const trigger = document.querySelector('.trigger');

function toggle() {
  menu.classList.toggle('menu--open');
}

trigger.addEventListener('click', toggle);
body {
  margin: 0;
}

.menu {
  box-sizing: border-box;
  margin-left: -320px;
  width: 320px;
  background-color: #CCC;
  transition: all .3s;
  padding: 1rem;
}

.menu--open {
  margin-left: 0;
}

a {
  color: #FFF;
  display: block;
}
<div class="trigger">Menu</div>
<div class="menu">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

Upvotes: 4

Related Questions