JSFiddle - React, Tailwind, and code Playground

by mhmk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>


<div id="menu">
		<ul>
			<a href="#"><li>صفحه نخست</li></a>
			<a href="#"><li>انجمن</li></a>
			<a href="#"><li>تبلیغات</li></a>
			<a href="#"><li>تماس با ما</li></a>
		</ul>
	</div>
	
	<div id="bar">
		<a href="#"><h1>Menu</h1></a>
	</div>
   
	<script>
		$(document).ready(function(){
			$("#bar a").click(function(){ 
        event.preventDefault();
				$("#menu").slideToggle("slow");
			});
		});
    </script>

CSS

/* CSS */

a {
	text-decoration: none;
	color: #2e2e2e;
}

ul {
	font-family: Helvetica, Arial, sans-serif;
	list-style: none;
	margin: 0;
	padding: 12px 0;
	text-align: center;
}

ul li {
	color: #fff;
	font-size: 10px;
	letter-spacing: 2px;
	padding: 12px 0;
	text-transform: uppercase;
}

#menu {
	background: #222;
	display: none;
	width: 100%;
}

#bar {
	background: #eee;
	box-shadow: 0 0 5px #000;
	-mox-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	height: 50px;
	width: 100%;
}

h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: bold;
	letter-spacing: 4px;
	margin: 0;
	padding: 18px;
	text-align: center;
	text-transform: uppercase;
}