Toggle-btn, Right navigation side bar doesnt work

Question

I have problem with the toggle-btn. The navigation content is supposed to slide out from right to left. However, content is fixed on the right side of the page and the button doesn't work at all. May I know what should I do?

HTML:

 <div id="sidebar" align="center">

        <button class="toggle-btn" onclick="toggleSidebar()">
            <span></span>
            <span></span>
            <span></span>
        </button>
            <ul class="side">
              <li>Home</li>
              <li>Contact</li>
              <li>About Us</li>
            </ul>
 </div>

---

CSS:

#sidebar.active{
    nav-right:1px;
}

#sidebar .side {
    position: fixed;
    width: 200px;
    height: 100%;
    background: #151719;
    left: 200px;
    transition: all 500ms linear;

}

#sidebar ul li {
    color: rgba(230,230,230,0.9); 
    list-style: none; 
    padding: 15px 10px; 
    border-bottom: 3px solid rgba(100,100,100,0.6);
}

#sidebar .toggle-btn{
    position:absolute;
    right:10px;
    top:1px;
}

#sidebar .toggle-btn span{
    display:block;
    width:25px;
    height:3px;
    background: #151719;
    margin: 2.5px 0px;
}

---

Javascript:

function toggleSidebar() {
       document.getElementById("sidebar").classList.toggle('active');
   }

Answer 1

You can toggle state of sidebar by checking href property of an anchor. Check demo here codepen

 function toggleSidebar(ref){ document.getElementById("sidebar").classList.toggle('active'); } (function(){ var sidebarAnchors = document.querySelector("#sidebar").getElementsByTagName('a'); for(var i=0;i<sidebarAnchors.length;i++){ sidebarAnchors[i].onclick = function(event){ if(event.hash != "" || event.hash != undefined || event.hash != null){ toggleSidebar(null); } }; } })();

 * { margin:0px; padding:0px; box-sizing:border-box; font-family:sans-serif; } #sidebar { position:fixed; top:0px; left:-200px; width:200px; height:100%; background:#151719; transition:all 300ms linear; } #sidebar.active { left:0px; } #sidebar .toggle-btn { position:absolute; left:220px; top:10px; } #sidebar .toggle-btn span { display:block; width:30px; height:5px; background:#151719; margin:5px 0px; cursor:pointer; } #sidebar div.list div.item { padding:15px 10px; border-bottom:1px solid #444; color:#fcfcfc; text-transform:uppercase; font-size:15px; } #sidebar div.list div.item a { text-decoration:none; color:#fcfcfc; } body { padding-left:220px; }

 <div id="sidebar"> <div class="toggle-btn" onclick="toggleSidebar(this)"> <span></span> <span></span> <span></span> </div> <div class="list"> <div class="item"><a href="http://codingflag.com">Home</a></div> <div class="item"><a href="#about">About us</a></div> <div class="item"><a href="#contact">Contact us</a></div> </div> </div> <p id="home"> <h1>Home</h1> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p> <p id="about"> <h1>About</h1> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p> <p id="contact"> <h1>Contact</h1> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum ullam temporibus quaerat pariatur laudantium numquam optio, praesentium quas nesciunt animi accusamus libero voluptas ipsum alias odio velit dolore delectus?</div></p> <p>