About
Explore
Events & Classes
Support Us
Join
Sign In
Ibraheem
View Project Page
Run
Fullscreen
Sidebar Sample
HTML
CSS
JS
<body> <h1>Hello there and welcome!</h1> <button onclick="openSidebar()">How are you feeling Today</button> <p>My name is Ibraheem</p> <h4>Absolutely Amazing(my favourite book)</h4> <p class="p1">I also like diary of the wimpy kid<a target="_blank" href="https://www.bing.com/search?q=diary+of+the+wimpy+kid&cvid=fe09162afe36445f82922d55d970afee&FORM=ANNTA1&PC=U531"> Diary of a wimpy kid<a>Do you to?</p> <div class="sidebar" id="sidebar"> <button class="style" onclick="closeSidebar()">x</button> <a target="_blank" href="https://justcodaborate.com/project_images/happy%20emoji.jpg">Happy</a> <a target="_blank" href="https://justcodaborate.com/project_images/joyful%20emoji.jpg">Joyful</a> <a target="_blank" href="https://justcodaborate.com/project_images/bored%20emoji.jpg">Bored</a> <a target="_blank"href="https://justcodaborate.com/project_images/sad%20emoji.jpg">Sad</a> <a target="blank"href="https://justcodaborate.com/project_images/gloomy%20emoji.jpg">Gloomy</a> </div> </body>
*:focus { outline: none; } .sidebar { display: none; height: 100%; background-color:cyan; color:cyan; position: fixed; top: 0; left: 0; bottom: 0; width: 300px; padding: 0; overflow-y: scroll; overflow-x: hidden; } .sidebar a { margin-bottom: 0.5rem; background-color: blue; color:black; display: block; max-width: 100%; padding: 10px; text-decoration: none; } .sidebar a:hover { background-color:lime; } .sidebar.open { display: block; } .style { border-radius: 50%; border: 1px solid black; font-size: 30px; padding-left: 8px; padding-right: 8px; padding-bottom: 2px; padding-top: 2px; float: right; position: fixed; right:0; cursor:grabbing; } .style:hover { background-color: cyan; }
function openSidebar() { document.getElementById("sidebar").classList.add("open"); } function closeSidebar() { document.getElementById("sidebar").classList.remove("open"); }
About
Explore
Events & Classes
Support Us
Join
Sign In
