JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div class="main-menu ">
            <ul>
                <li><a href="#anchor-about">About</a></li>
                <li><a href="#anchor-concept">Concept</a></li>
                <li><a href="#anchor-history">History </a></li>
                
            </ul>
            <span class="menu-button"></span>
        </div>

CSS

ul {
    margin: 0;
}
.main-menu {
    overflow: hidden;
  display: inline-block;
  background: #000;
  border-left: 3px solid #ff0000;
  height: 34px;
  border-radius: 0 5px 5px 0;
  padding: 0 22px 0 0;
  position: relative;
  width: 300px;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}
.main-menu:before {
  content: "";
  display: block;
  width: 2000px;
  height: 34px;
  background: #EBEBEB;
  position: absolute;
  top: 0;
  left: -2003px;
}
.main-menu:after {
  display: block;
  content: "click";
  background: green;
    color: #fff;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 4px;
  right: 6px;
}
.main-menu.short {
  width: 35px;
}
.main-menu.short li {
  display: none;
}
.main-menu li {
  opacity: 1;
  float: left;
  margin: 5px 13px 0;
}
.main-menu a {
  color: #adadad;
  font-size: 17px;
  text-decoration: none;
  position: relative;
}
.main-menu a:hover {
  color: #fff;
}
.main-menu a:hover:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #f00;
  position: absolute;
  bottom: -6px;
  left: 0;
}
.main-menu a.active {
  color: #fff;
}
.main-menu a.active:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #f00;
  position: absolute;
  bottom: -6px;
  left: 0;
}
.main-menu .menu-button {
  width: 30px;
  height: 34px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 1000000;
}

JavaScript

var mainMenu = $('.main-menu'),
    menuBut = $('.menu-button',mainMenu),
    menuLinks = $('a',mainMenu),
    timer;
function autoHideMenu(){
    timer = setTimeout(function(){
        mainMenu.addClass('short');
    }, 5000);    
}
menuBut.on('click', function(){
    mainMenu.toggleClass('short');
});
menuLinks.on('click', function(){
    menuLinks.removeClass('active');
    $(this).addClass('active');
});
mainMenu.on({
    mouseenter: function(){
        clearTimeout(timer);
    },
    mouseleave: autoHideMenu
}).mouseleave();