Side Navigation Menu Creation

Netbax Online Editor Try it Yourself

<div id="bax3" class="bax4" style="width: 0%;">
<p class="x-center"><img src="../../../images/logo-empty.png" width="140" height="140" border="0" alt="logo" title="logo"></p>
<hr>
    <a href="javascript:void(0)" class="bax2" onclick="bax2()"><img src="../../../images/remove.png" width="20" height="20" border="0" alt="remove" title="remove"></a>
<a href="#"><img src="../../../images/home.png" width="20" height="20" border="0" alt="home" title="home"> Home</a>
      <a href="#"><img src="../../../images/menu.png" width="20" height="20" border="0" alt="menu" title="menu"> Menu</a>
<a href="#"><img src="../../../images/page.png" width="20" height="20" border="0" alt="page" title="page"> Page</a>
      <a href="#"><img src="../../../images/contact.png" width="20" height="20" border="0" alt="contact" title="contact"> Contact</a>
      <a href="#"><img src="../../../images/about.png" width="20" height="20" border="0" alt="about" title="about"> About</a>
<hr>
<p> Copyright © All rights reserved. This sidebar menu is made with  by netbax <a href="https://www.example.com/" target="_blank"><font color="yellow">www.example.com</font></a></p>
<hr>
  </div>

<img src="../../../images/sidebar2.png" width="100" height="100" border="0" alt="sidebar2" title="sidebar2" onclick="openbax4()" style="cursor: pointer;">
<style>
.bax1 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    left:0;
    background-color: #0d0d0d;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    opacity:0;
    transition: opacity 1s;
}

.bax4 {
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    background-color: #0d0d0d;
    position: fixed;
    z-index: 3;
    overflow-x: hidden;
    transition: .5s;
    padding-top: 60px;
color:#fff;
}
.bax4 a{
    padding: 8px 8px 8px 32px;
    text-decoration: none !important;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: .3s
}
.bax4 a:hover, .bax4 a:focus{
    color: #f1f1f1;
}
.bax2 {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

</style>

function bax2() {
    document.getElementById("bax3").style.width = "0%";
    
    document.body.style.backgroundColor = "white";
    document.getElementById("bax").style.width = "0%";
    document.getElementById("bax").style.opacity = "0"; 
}

</script>