JSFiddle - React, Tailwind, and code Playground

by Victor Alekseev

HTML

<div id="panel">
<div id="menu">
<a href="#">Пункт 1</a>
<a href="#">Пункт 2</a>
<a href="#">Пункт 3</a>
<a href="#">Пункт 4</a>
<a href="#">Пункт 5</a>
<a href="#">Пункт 6</a>
</div>
<div id="button"></div>
</div>

CSS

* {
  margin:0;
  padding:0;
}
html, body {
  height:100%
}
body {
  position:relative;
}
#panel {
  position:absolute;
  bottom:0;
  left:0;
  background:#9966CC;
  height:50px;
  width:100%;
}
#menu > a {
  display:block;
  padding:5px 10px;
  text-decoration:none;
  color:#000;
}
#menu > a:hover {
  background:rgba(0,0,0,.1);
}
#menu {
  height:0;
  width:200px;
  background:#78DBE2;
  overflow:hidden;
  position:absolute;
  bottom:50px;
  left:10px;
}
#button {
  background:url('http://cdn.redmondpie.com/wp-content/uploads/2012/06/Windows-Start-Orb.png') no-repeat center center;
  background-size:40px;
  height:50px;
  width:50px;
  margin-left:5px;
}

JavaScript

$(document).ready(function(){
	$('#button').click(function(){
		var menu = $('#menu').height();
		if (menu == '0') {
			$('#menu').css('height', 'auto');
		} else {
			$('#menu').css('height', '0');
		}
	});
});