JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<button class="icon-mobile-menu ">
   <span></span>
    <span></span>
    <span></span>
</button>
<div class="menu">
    <div id="menu-center">
        <ul>
            <li><a class="menu-active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<section class="section" id="home"></section>
<section class="section" id="portfolio"></section>
<section class="section" id="about"></section>
<section class="section" id="contact"></section>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    display: block;
    opacity: 1;
    width: 100%;
    height: 0;
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
}

#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.menu-active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

.icon-mobile-menu {
 display:none;
   width: 40px;
  height: 35px;
  border: none;
  background: rgba(44,44,68,0.0);
   position:relative;
  cursor: pointer;
  margin:15px;
  right:0px;
  border-radius:4px;
  /*border: 1px solid #000;*/
  float: right;
}

.icon-mobile-menu:focus {
  outline: none;
}
.icon-mobile-menu span {
  width: 30px;
  height: 2px;
  left: -2px;
  border-radius: 100px;
  background: #fff;
  position: absolute;
  margin:8px;
  
}
.icon-mobile-menu span:nth-child(1) {
  top: 0px;
  -webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: 0.2s all 0.4s, -webkit-transform 0.2s;
  transition: transform 0.2s, 0.2s all 0.4s;
  transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;
}

.icon-mobile-menu span:nth-child(2) {
  top: 50%;
  margin-top: -2px;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.4s, visibility 0.4s;
...

JavaScript

let icon_mobile = document.querySelector(".icon-mobile-menu");
let menu_mobile = document.querySelector(".menu");

let menus_mobile = document.querySelectorAll(".menu li a");
let isMenuOpen = false;

function iconClick() {
  icon_mobile.classList.toggle("on");
  if (isMenuOpen) {
    function hide(height){
      if (height >= 0) {
        menu_mobile.style.setProperty('height', height + 'px');

        setTimeout(hide, 10, height - 1);
      }
    }

    hide(75);
  }else{
    function open(height) {
      if (height <= 75) {
        menu_mobile.style.setProperty('height', height + 'px');

        setTimeout(open, 10, height + 1);
      }
    }

    open(0);
  }
  isMenuOpen = !isMenuOpen;
}

function menuClick(ed){
  if( menu_mobile.contains(ed.target) ){
    icon_mobile.classList.toggle("on");
    menu_mobile.classList.remove("menu-fsdgsd");
  }
}

for (let i = 0; i < menus_mobile.length; i++) {
  menus_mobile[i].addEventListener('click', menuClick);
}

icon_mobile.addEventListener("click", iconClick);

//menu_mobile.addEventListener("click", menuClick);