JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<header id="header">
    <p id="title">Viso Graph</p>
</header>

<div id="utilities">
   
    <button id="menuButton" onclick="expandMenu()">
    </button>
  </div>

CSS

#header
{
    width:100%;
    height:60px;
    text-align:center;
    background-color:rgb(255,211,78);
}
#title
{
    display:inline-block;
    line-height:normal;
    vertical-align:middle; 
}

#menuButton
{
    width:150px;
    height:0;
    border-right:3px solid transparent;
     border-left:3px solid transparent;
     border-bottom:20px solid rgb(255,180,27);
      background-color:transparent;
      outline:none;
      border-top:0;
}
#utilities
{
    height:0;
    background-color:rgb(100,100,100);
    
}

JavaScript

var isMenuActive;

$(document).ready(function()
                  {
                  isMenuActive = false;
                      $("#menuButton").on({
                          mouseenter:function()
                          {
                         $("#menuButton").css('border-bottom-color', "rgb(255,241,98)");
                          },
                          mouseleave: function(){
                         $("#menuButton").css('border-bottom-color', "rgb(255,180,27)");
                          }
                      
                      });                  
                  
                  });

function expandMenu()
{
    alert("called");
     $("#menuButton").css('border-bottom-color', 'rgb(255,190,31)');
    if(!isMenuActive){
    $("#utilities").animate({height : 300},"fast",function(){
        alert("completed");
        isMenuActive = !isMenuActive;
    });
    }
   
 }