My Bloggers Code: Gray Mobile sidenev

<!doctype html>

<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #333333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 80px;
    padding-bottom: 70px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 14px;
    color: #818181;
    display: block;
    transition: 0.3s

box-sizing: border-box;
border-bottom-color: rgb(60, 60, 60);
border-bottom-style: solid;
border-bottom-width: 1px;
color: #eeeeee;
font-family: Verdana, Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
margin: 15px;
padding:3px;
letter-spacing: 2px;
text-align: left;
text-transform: uppercase
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;

}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 70px;}
.sidenav a {font-size: 14px;}
}
</style>

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>

<a href="http://www.adclubads.com/p/hompage.html">home</a>
<a href="http://www.adclubads.com/p/about-us.html">about us </a>
<a href="http://www.adclubads.com/p/services.html">services</a>

<a href="http://www.adclubads.com/p/why-us.html">why chhose us ? </a>
<a href="http://www.adclubads.com/p/concept.html">How to organize ?</a>

<a href="http://www.adclubads.com/2017/03/how-to-promote.html">How to promote ?</a>

<a href="http://www.adclubads.com/p/contact-us.html">Contact us</a>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSRDF-WNQYl_yECKDynYTLQ9FB2v6xoEYLWE7iheIRbyF0ALQS8a9bqtVTbTRrr7-OXYAEpgBW2UreQFS8vtwN5VMaqIl2hPmIhGGyTAyJMH-B4ZR-iYmbhIcdSjDuqjSd0e_pkaEMh_dz/s1600/navmenu.png" style="float:right;width:50px;height:50px;margin-right:25px;margin-top:35px" />

</span>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>


</!doctype>