so i tried building a collapsible sidebar , the sidebar collapses when clicked on button but the contents of it do not get collapsed. When i click on the open menu button it opens the side bar but when i click that button to close it again the content of sidebar that is "hi" written in h1 tag does not disappear. please help.
”’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidebar practice</title> <link rel="stylesheet" href="css/sidebar.css"> </head> <body> <div class="sidenav" id="sidenav"> <h1>hi</h1> </div> <div class="topnav" id="topnav"> <button onclick="openNav()"> open menu </button> </div> <div id="main"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates aliquam, nihil ab fugiat temporibus maxime nulla pariatur, sapiente porro blanditiis ipsam eos, labore magnam dolore et incidunt voluptatem inventore. Possimus? </p> </div> <script> var checked = 0; function openNav() { if(checked == 0){ document.getElementById("sidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.getElementById("topnav").style.marginLeft = "250px"; checked = 1; } else{ document.getElementById("sidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.getElementById("topnav").style.marginLeft = "0"; checked = 0; } } </script> </body> </html> '''body { margin: 0; } #topnav { background-color: #333; overflow: hidden; padding: 40px 16px; transition: 0.5s; } #image1 { height: 25px; width: 25px; } #image2 { height: 25px; width: 25px; } #sidenav { height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: #333; padding-top: 20px; transition: 0.5s; } button { background-color: #333; } #main { transition: margin-left .5s; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidebar practice</title> <link rel="stylesheet" href="css/sidebar.css"> </head> <body> <div class="sidenav" id="sidenav"> <h1>hi</h1> </div> <div class="topnav" id="topnav"> <button onclick="openNav()"> open menu </button> </div> <div id="main"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates aliquam, nihil ab fugiat temporibus maxime nulla pariatur, sapiente porro blanditiis ipsam eos, labore magnam dolore et incidunt voluptatem inventore. Possimus? </p> </div> <script> var checked = 0; function openNav() { if(checked == 0){ document.getElementById("sidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.getElementById("topnav").style.marginLeft = "250px"; checked = 1; } else{ document.getElementById("sidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.getElementById("topnav").style.marginLeft = "0"; checked = 0; } } </script> </body> </html>
>Solution :
Add overflow:hidden to your css in #sidenav
#sidenav { overflow:hidden; }