JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="wrapper">
<nav class="tumblr-menu">
    <!-- Icon Burger -->
    <a class="selector">
        <div class="menu-icons-wrapper">
            <span class="bar-icon"></span>
            <span class="bar-icon"></span>
            <span class="bar-icon"></span>
        </div>
    </a>
    <div class="menu-items">
        <ul>
            <li class="search-item">
                <input type="text" name="search" id="search" placeholder="Search">
                <button class="btn fa fa-search"></button>
            </li>
            <li class="archive-item">
                <a href="#">Archive <i class="icns fa fa-arrow-right"></i></a>
            </li>
        </ul>
    </div>
</nav>

<header>
    <h1>Toggle Menu</h1>
    <h2>Tumblr Style</h2>
</header>

 <section>
   
   <p>I recreated the menu of the blog basic template from <strong>Tumblr</strong>. Click on the icon and the search bar and the archive button appears.  For this, I used the  transition and transformation of <strong>css 3</strong> and a basic function from <strong>jQuery</strong>.</p>
   <p>Any comments ?</p>
 </section>
  
  <footer>
    <p> Follow me : 
    <a href="https://twitter.com/FrancoisCoron"><i class="fa fa-twitter"></i></a> | <a href="https://www.behance.net/francoiscoron/"><i class="fa fa-behance"></i></a> | <a href="https://dribbble.com/francoiscoron"><i class="fa fa-dribbble"></i></a>
      </p>
  </footer>

</div>

CSS

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:focus { outline: none;}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
body {
    background: #2c4762;
    padding: 0; margin: 0;
    font-family: helvetica, sans-serif;
    -webkit-font-smoothing : antialiased;
}
.wrapper {
  width: 60%;
  margin: 0 auto;
}
header {
    color: #FFF;
    text-align: center;
    font-size: 1.6rem;
    margin-top: 8rem;
}
header h1 { 
  margin-bottom: 0; 
  text-shadow: 1px 2px 3px rgba(0,0,0,.4);
}
header h2 {
    margin: 0;
    color: #1D2E40;
}
.tumblr-menu {
    position: absolute;
    left: 80px;
    top: 30px;
}
.selector {
    cursor: pointer;
    display: block;
    height: 36px;
    width: 37px;
}

.selector .bar-icon {
    height: 3px;
    width: 20px;
    background: #fff;
    display: block;
    opacity: 1;
    margin-top: 4px;
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    -o-transition: -o-transform 0.15s ease-in-out;
    transition: -ms-transform 0.15s ease-in-out;


    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
.active .menu-icons-wrapper .bar-icon { background: #1D2E40; }
.active .menu-icons-wrapper .bar-icon:first-child { transform: rotate(45deg) translate3d(10px, 0px, 0); }
.active .menu-icons-wrapper .bar-icon:nth-child(2) { transform: rotate(-45deg) translate3d(5px, 5px, 0); }
.active .menu-icons-wrapper .bar-icon:last-child { opacity: 0; }
.menu-items {
    position: absolute;
    top: -5px;
    left: 25px;
    background: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    width: 200px;
    opacity: 0;
    -webkit-transition: all 0.25s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 0.25s cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 0.25s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.menu-items...

JavaScript

jQuery(document).ready(function($){
  $('.selector').click(function(){
    $(this).toggleClass('active');
    $('.menu-items').toggleClass('show');
  });
});