Catatan kode Side Navigasi menu

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<div id="mySidenav" class="jempol">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a>
 
      <a href=''>About Us</a>
      <a href=''>Pivacy Policy</a>
      <a href=''>Contact us</a>
      <a href=''>Dsiclaimer</a>
  <a href=''>Terms and Condition</a>
  
</div>
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
body {
  font-family: "Lato", sans-serif;
}

.jempol {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f7f7f7;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.jempol a {
    padding: 3px 10px 6px 39px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.jempol a:hover {
  color: #f1f1f1;
}

.jempol .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 24px;
  margin-left: 50px;
}
  .jempol .closebtn1 {
  
}

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

☰ open

x About Us Pivacy Policy Contact us Dsiclaimer Terms and Condition

Example Klik Open