JSFiddle - React, Tailwind, and code Playground

by Michael Jordan

HTML

<header>
  <nav class="cf">
    <a class="nav-toggle toggle" href="#">→</a>
    <ul class="menu">
      <li><a href="#">Stuff One</a></li>
      <li><a class="eventList-toggle toggle" href="#">Events stuff</a></li>
      <li><a href="#">Stuff Three</a></li>
    </ul>
  </nav>
</header>

<div class="main">
  <div>
    <p>Stuff in here</p>
  </div>
  <div id="events" class="eventList">
    <p>Events form stuff in here</p>
    <div class="form-actions">
      <button type="submit" value="Submit">Submit</button>
      <a href="#">Cancel</a>
    </div>
  </div>
  <div>
    <p>Even more stuff in here</p>
    <p>The more stuff</p>
  </div>
</div>

CSS

header {
  background-color: black;
  padding: 16px;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  float: right;
}

nav {
  position: relative;
  z-index: 200;
}

nav li {
  display: inline;
}

nav a {
  color: white;
  display: inline-block;
  padding: 4px 12px;
  text-decoration: none;
}

nav li a {
  display: inline-block;
}

.nav-toggle {
  background-color: grey;
  float: left;
}

.menu,
.eventList {
  opacity: 0;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
}

.menu.isVisible,
.eventList.isVisible {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.main {
  position: relative;
}
.main > div {
  border: 1px solid #dddddd;
  overflow: hidden;
  padding: 16px;
}

.eventList {
  background-color: #e4e4e4;
  position: absolute;
  top: 0;
  width: 100%;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

JavaScript

$(function(){
	$('.nav-toggle').click(function(e){
		e.stopPropagation();
		$(this).add('.menu').toggleClass('isVisible');
	});
});
$(function(){
	$('.eventList-toggle').click(function(e){
		e.stopPropagation();
		$('#events').toggleClass('isVisible');
	});
});
$(document).on('click', function(event) {
  if (!$(event.target).find('.isVisible').removeClass('isVisible'));
});