JSFiddle - React, Tailwind, and code Playground

by c2webdev

HTML

<nav class="clearfix">
	<a href="#" id="pull">Menu</a>
	<ul class="clearfix">
			<li><a href="#">item1</a></li>
			<li><a href="#">item2</a></li>
			<li><a href="#">item3</a></li>
			<li><a href="#">item4</a></li>
			<li><a href="#">item5</a></li>	
			<li><a href="#">item6</a></li>
			<li><a href="#">item7</a></li>
			<li><a href="#">item8</a></li>
			 <form id="search-form" action="#" method="get" >
		
			     <div id="search-outer">            		
            <input id="search-input" type="text" type="text" name="q" value="Site search" onfocus="if (this.value=='Site search') { this.value=''; };return true;" /><input id="search-submit" type="submit" value="Search" />
			  </div>
			
		  </form>
		</ul>
		
		
	</nav>

CSS

nav { height: 40px; width: 100%; background: #e6ddf2; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold;
	position: relative; }
nav ul { padding: 0; margin: 0 auto; width: 100%; height: 40px; }
nav li { display: inline; float: left; }
nav a { display: inline-block; width: 12em; text-decoration: none; line-height: 40px; color:#5e3790; }
nav li a {	border: 1px solid #5e3790;}
nav li:last-child a {	border-right:1px solid #5e3790;}
nav a:hover, nav a:active { background-color: #5e3790; color:#e6ddf2;}
nav a#pull {	display: none;}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav { height: auto;}
nav ul { width: 100%; display: block;	height: auto;}
nav li { width: 50%; float: left;	position: relative; }
/*nav li a { border: 1px solid #0098DB;	}*/
nav a { text-align: left; width: 100%; text-indent: 25px;	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 110em) {
nav {border-bottom: 1px solid #5E3790; }
nav ul { display: none; height: auto;	}
nav a#pull { display: block; background: #5E3790; height:5.2em;
background-color: #5E3790; width: 100%; position: relative; color:#fff;	}
nav a#pull:after { content:""; background: url('mag-search-logo.png') no-repeat; width:156px; height: 45px; display: inline-block;
float:left;	margin:1.7em 0 0 0.2em;	}
#search-outer {  width:100%;  margin:auto; background:#e6ddf2; clear:both; height:3em; padding-top:0.5em; padding-left:0.2em;}
#search-input {  margin: 0;  width: 90%;  font-size: 20px;  padding: 5px;  border: 1px solid #EEEEEE;  float:left;}
#search-submit {  margin: 0;  font-size: 20px;  border:none;  background: url('mag-glass.png') no-repeat #5e3790;  color:#fff;  width:37px;  height:35px;  float:left; text-indent:-999px;}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li { display: block; float: none; width: 100%;	}
nav li a { border-bottom: 1px solid #576979;}
}

JavaScript

$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});