JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<button id="menu-button">click me</button>
<div class="menu-div">this is a menu</div>

CSS

#menu-button {
  margin: 2em 0;
}
.menu-div {
  background-color: yellow;
  margin: 2em 0;
  padding: 1em;
  display:none;
}

JavaScript

$().ready(function () {
  var timeout;
  
  $('#menu-button').click(function () {
    $('.menu-div').slideDown();
    timeout = window.setTimeout(function () {
        $('.menu-div').slideUp(200);
    }, 5000);
  });

  $('.menu-div').mouseenter(function () {
    window.clearTimeout(timeout);
  });

  $('.menu-div').mouseout(function () {
    $('.menu-div').slideUp(200);
  });
});