Ask coding questions

← Back to all posts
How do you make a sidebar in html?
Coder2404 (361)

How do you make a sidebar in html?
I want a button and when you press the button, the sidebar pops out, when you press the button again the sidebar closes. Can you help me make that?

Comments
hotnewtop
19wintersp (1121)

@xxpertHacker Here's a repl; it's hard to explain. Doesn't look amazing, but works, and without JS (pure CSS).

Coder2404 (361)

@19wintersp there is a little problem...

The sidebar is sorta cut off...
Can you fix it?

19wintersp (1121)

@Coder2404 Oops, sorry, that's fixed now.

xxpertHacker (865)

Not an answer, but good-looking sidebars are hard. lol.

@19wintersp You wanna guide 'em? They seem like they're not looking for the first think on W3Schools as shown by their response to Ryan.

InvisibleOne (2678)

Sure, all you need to do is create two divs, one will hold the data for the main page, and the second will hold the buttons and stuff for the side bar. Set the sidebar width to 10%, and the other div to 90%. In the css set the sidebar display : none; And then on the button that reveals it: `onclick='reveal()' And in the js

function reveal() {
    document.getElementById('your_side_bar_id').style.display = 'block';
}
Coder2404 (361)

@RYANTADIPARTHI Did you even read what I wrote? (Btw I wasn’t trying to be mean)

Coder2404 (361)

@RYANTADIPARTHI Not exactly because it’s not actually YOU thinking how to do it, sorry

Coder2404 (361)

@RYANTADIPARTHI I want my website to be like repl.it. repl.it has this 3 line thingy that helps you see your notifications and you can just click out...