Meny Hebron

by Yuriy Petrichenko

HTML

<div class="openMenu"><span class="clickay">&#61;</span></div>
<div class="blockMenu">
<ul class="navigation">
	<li>our mission</li>
	<li>students</li>
	<li>study</li>
	<li>faq</li>
	<li>contacts</li>
</ul>
</div>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident nostrum omnis similique id amet enim quis iure mollitia, ipsa fugiat, praesentium quia. Sint deleniti sit, consequatur maxime tempore nemo explicabo?</p>
</div>

CSS

.openMenu{
	background-color:LightGreen;
	margin-bottom:0px;
	width:100%;
}
.clickay{
	font-size:45px;
	font-weight:bold;
	cursor:pointer;
	color:#292929;
	transition:all .5s;
}
.navigation{
	padding-left:0px;
	margin-top:0px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background-color:#292929;
}
li{
	color:#fff;
	font-family:"Arial";
	font-size:30px;
	list-style:none;
	padding:5px;
	cursor:pointer;
}
.blockMenu{
	position:fixed;
	z-index:2;
	background-color:#292929;
	width:100%;
	height:100vh;
	opacity:0.9;
	display:none;
}
li:hover{
	color:orangered;
}

JavaScript

$(document).ready(function() {
         $('.clickay').click(function() {
            $('.blockMenu').slideToggle("slow");

         });
         });