JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="menu_container">
    <div class="button_container">
        <button data-selected="false">1</button><!--
      --><button data-selected="false">2</button><!--
      --><button data-selected="false">3</button><!--
      --><button data-selected="false">4</button>
    </div>
</div>

CSS

body{
  position: relative;
  display: inline-block;
  background-color: #888888;
}
.menu_container{
  position: relative;
  display: inline-block;
  width: 100%; height: 8%;
  background-color: #555555;
}
.button_container{
  position: absolute;
  display: inline-block;
  width: 100%; height: 20%;
  bottom: 0;
}
button{
  width: 25%; height: 100%;
  margin: 0;
  border: 0;
}
button:nth-of-type(1) {
    background: yellow;
}
button:nth-of-type(2) {
    background: #ff0000;
}
button:nth-of-type(3) {
    background: green;
}
button:nth-of-type(4) {
    background: blue;
}

JavaScript

var isDragging = false;
var button_color = '';
$('body').hover(function() {
  $('body').mousemove(function(e) {
    isDragging = true;
    var parentOffset = $(this).offset();
    var relY = e.pageY - parentOffset.top;
    if (relY / 2 <= 75 && relY > 8) {
      $('.menu_container').css('height', (relY / 2) + '% ');
    }
  });
  $('button').mouseenter(function() {
    $(this).data('selected', 'true');
    button_color = $(this).css("background-color");
    $(this).css('background-color', '#dddddd');
    console.log($(this).data('selected'));
  });
  $('button').mouseleave(function() {
    var $this = $(this);
    $this.data('selected', 'false');
    $this.css('background-color', button_color);
    button_color = '';
    if($this.offset().top + $this.outerHeight()){
      $('.menu_container').css('height', '5%');
      $(".app_container").css('background-color', '#dddddd');
    }
  });
  return false;
});