Meny Hebron

by Yuriy Petrichenko

HTML

<div class="openMenu"><span class="clickay">| | |</span><span class="clickayOff">___</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>

CSS

.openMenu{
	background-color:LightGreen;
	padding:5px;
	display:flex;
	justify-content:space-between;
	margin-bottom:0px;
}
.clickay{
	font-size:35px;
	font-weight:bold;
	cursor:pointer;
	color:#292929;
	transition:all .5s;
}

.clickayOff{
	display:none;
	font-size:35px;
	font-weight:bold;
	cursor:pointer;
	color:#292929;
	transition:all .5s;
}
.navigation{
	margin-top:0px;
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#292929;
}
li{
	color:#fff;
	font-family:"Arial";
	font-size:30px;
	list-style:none;
	padding:5px;
	cursor:pointer;
}
.blockMenu{
	display:none;
}

JavaScript

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

         });
         });