SOURCE

function openMain(){
    document.getElementById('mobileMain').style.height = '100%';
}
function closeMain(){
    document.getElementById('mobileMain').style.height = '0%';
}

<div class="mobileMain" id="mobileMain">
	<a href="#" onclick="closeMain()">&times;</a>
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Clients</a></li>
		<li> <a href="#">Contact</a></li>
	</ul>
</div>
<span onclick="openMain()" style="font-size:40px;">&#9776;</span>

.mobileMain{
    width: 100%;
    height: 0%;
    background-color: green;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: hidden;
    transition: all 0.5s;
}

.mobileMain>ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mobileMain a,{
    font-size: 36px;
    color: #818181;
    display: block;
}
.mobileMain a:hover,.mobileMain a:focus{
    color: #f1f1f1;
}
.mobileMain>a{
    font-size: 60px;
    position: absolute;
    top: 20px;
    right: 50px;
}
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;
}