JSFiddle - React, Tailwind, and code Playground

by Dedi Juniardi

HTML

<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>
<ul class='menu'>
    <li class='home'><a href='#'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
	<li><a href='#'>Link Exchange</a></li>
	<li><a href='#' title='Off Topic Page'>Off Topic</a></li>
</ul>
</nav>
<div class="content">
Scroll down to see</div>

CSS

body {
 margin: 0px;
 padding: 0px;
 font-family: arial, sans-serif;
 font-weight: 200;
 font-style:normal;
}

/* CSS Main Menu */
nav#menu {display: block;background: #eee;margin: 0 0px;font-size: 0;border: 1px solid #eaeaea;border-top: none;position:fixed;width:100%}
.menu {display:block;margin:0;padding: 0 0 0 20px;}
.menu .home a{;background:#4791d2;color:#fff!important;}
.menu.home a:hover{background:#4f9adb;}
.menu li {display:inline-block;position:relative;margin:0;}
.menu li a {font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;text-decoration:none;padding:20px 15px;display:block;color:#888;transition:all .5s ease; font-style:normal;
}
.menu li a:hover,.menu li:hover {background:#4791d2;color:#fff;}
.menu ul {display:none;margin:0;padding:0;width:100%;min-width:160px;position:fixed;left:0px;background:#f9f9f9;z-index:99;transition:all .5s ease;}
.menu ul li {display:block;float:none;margin:0;padding:0;}
.menu ul li a {font-size:12px;font-weight:700;display:block;background:#333;color:#fff;transition:all 0.3s ease-out;}
.menu ul li a:hover,.menu ul li:hover &gt; a {background:#4791d2;color:#fff;}
ul.menu &gt; li &gt; a &gt; i {margin-right:5px;font-weight:normal;}
ul.menu &gt; li &gt; a:hover &gt; i,ul.menu &gt; li:hover &gt; a &gt; i {color:#fff;}
.menu li:hover &gt; ul {display:block;}
.menu ul ul {left:160px;top:0px;display:none;transition:all .5s ease;}
.menu li &gt; ul ul:hover {display:block;}
.responsive-menu {display:none;padding:20px 15px;background:#fff;color:#aaa;text-transform:uppercase;font-weight:400;font-family:&#39;Open Sans&#39;;font-size:16px;}
.responsive-menu a {color:#aaa;}
li {list-style:none !important;}
.content {
  height: 2000px;
  font-style:normal;
  padding: 100px;
}
@media only screen and (max-width:640px){
.menu .searchbutton{display:none}
.menu {display:none;padding: 0;}
a#resp-menu {color:#aaa;}
.responsive-menu {display:block;}
nav {margin:0;background:none;}
.menu li {display:block;margin:0;}
.menu li a...

JavaScript

$(function(){
  var prevScroll = 0,
      curDir = 'down',
      prevDir = 'up';
  $(window).scroll(function(){
    	if($(this).scrollTop() >= prevScroll){
          curDir = 'down';
          if(curDir != prevDir){
          $('#menu').stop();
    	  	$('#menu').animate({ top: '-60px' }, 300);
          prevDir = curDir;
          }
      } else {
          curDir = 'up';
          if(curDir != prevDir){
          $('#menu').stop();
          $('#menu').animate({ top: '0px' }, 300);
          prevDir = curDir;
          }
      }
      prevScroll = $(this).scrollTop();
  });
})

//Main Menu
$(document).ready(function(){var e=$("#resp-menu");var t=$(".menu");$(e).on("click",function(e){e.preventDefault();t.slideToggle()});$(window).resize(function(){var e=$(window).width();if(e>767&&t.is(":hidden")){t.removeAttr("style")}})})