JSFiddle - React, Tailwind, and code Playground

by codingcodingcoding

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<nav id="navbar">
  <input type="checkbox" name="activate-menu" id="activate-menu" />
 
  <label for="activate-menu"> <span class="glyphicon glyphicon-align-justify menu"></span></label>
  <div class="menu">
    <ul class="lista">
	  <li class="option text-center">one</li>
	  <li class="option text-center">two</li>
	  <li class="option text-center">three</li>
	  <li class="option text-center">four</li>
	  <li class="option text-center">five</li>
      <li class="option brand">brand</li>
    </ul>
  </div>
  </nav>

CSS

.menu{
  font-size:35px;
  color:red;

} 
a {
    	font-size: 24px;
    	 font-family: Raleway;
    	font-weight: 900;
    	color: black;
    	text-decoration: none;
    }	

    .lista {
    	font-size: 18px;
    	font-family: "helvetica" sans-serif;
    	font-weight: 600
    } 

    ul {
    	list-style: none;
      margin-left:10px;
      margin-top:-40px;
    }

    li.option {
      display:inline-block;
    	position: relative;
    	height: 30px;
    
    width:12%;
    	line-height: 30px;					/*line-height centra el texto verticalmente cuando coincide con el height*/
    	opacity: 0;
    	left: 100px;
    	transition: .3s;
    }
li.option:hover{  
  pointer:cursor; 
    box-shadow: inset 0px 4px 0px red;
}
li.brand{
  color:pink;
    border-top:none;
  float:right;
}
    li.option:nth-child(1) {
    	transition-delay: .0s;
    }
    li.option:nth-child(2) {
    	transition-delay: .05s;
    }
    li.option:nth-child(3) {
    	transition-delay: .1s;
 
    }
    li.option:nth-child(4) {
    	transition-delay: .15s;
    }
    li.option:nth-child(5) {
    	transition-delay: .2s;
    }

    #activate-menu {
      display:none;
    }

    #activate-menu + label {
      cursor: pointer;
    }

    #activate-menu:checked ~ .menu .lista .option {
    	opacity: 1;
    	left: 0px;
    }

JavaScript

$(window).on("orientationchange load resize", function () {
     var width = $(document).width();
     if(width<765){
       $("#navbar").hide();
     }
     else if(width>765){
              $("#navbar").show();
     }
});