JSFiddle - React, Tailwind, and code Playground

Fliplet Navigation

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="side-menu">
  <div class="menu-screen-overlay"></div>
  <div class="sidenav">
    <div class="closebtn"><i class="fa fa-times" aria-hidden="true"></i></div>
    <ul>
      <li><a href="#">Example Apps</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">How It Works</a></li>
      <li><a href="#">Customers</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <ul class="bottom-btns">
      <li><a href="#">Free Trial</a></li>
      <li><a href="#">Log in</a></li>
    </ul>
  </div>
</div>
<header>
  <div class="fliplet-logo">
    <a href="#"><img src="http://fliplet.com/wp-content/themes/fliplet/assets/images/fliplet-logo.png" alt="Fliplet - Apps made easy" title="Fliplet - Apps made easy" /></a>
  </div>
  <div class="open-nav">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </div>
  <nav>
    <ul>
      <li><a href="#">Example Apps</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">How It Works</a></li>
      <li><a href="#">Customers</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <ul>
      <li class="btn btn-primary"><a href="#">Free Trial</a></li>
      <li><a href="#">Log in</a></li>
    </ul>
  </nav>
</header>
<section class="banner"></section>
<div class="container">
  <h1>Vehicula Ridiculus Amet</h1>
  <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus
    varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  border-bottom: 1px solid #00abd2;
  background: #FFF;
  padding: 15px;
}

header .fliplet-logo {
  width: 235px;
  height: 70px;
  display: block;
  float: left;
  position: relative;
  opacity: 1;
}

header .open-nav {
  position: absolute;
  top: 15px;
  right: 15px;
  height: 40px;
  width: 40px;
  font-size: 40px;
  color: #00abd2;
  line-height: 40px;
  cursor: pointer;
  display: none;
}

header .fliplet-logo img {
  max-width: 100%;
  max-height: 100%;
}

header nav {
  float: right;
  line-height: 70px;
  font-size: 13px;
}

header nav ul {
  float: left;
  padding: 0 15px;
  margin: 0;
}

header nav ul:last-child {
  border-left: 1px solid #00abd2;
}

header nav li {
  display: inline-block;
  position: relative;
}

header nav li.btn {
  margin: 0 10px;
}

header nav a {
  display: block;
  color: #00abd2;
  padding: 0 5px;
  margin: 0 10px;
  letter-spacing: 1px;
  position: relative;
  text-decoration: none;
}

header nav li.btn a {
  margin: 0;
}

header nav a:hover,
header nav a:focus,
header nav a.current {
  text-decoration: none;
  color: #00abd2;
}

header nav li a:after {
  background: none repeat scroll 0 0 #00abd2;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 100%;
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  width: 100%;
}

header nav a:hover:after,
header nav a.current:after {
  height: 1px;
  opacity: 1;
  filter: alpha(opacity=100);
...

JavaScript

$(".closebtn").on("click", closeNav);
$(".open-nav").on("click", openNav);

function openNav() {
  $("#side-menu").addClass("active");
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  $("#side-menu").removeClass("active");
}