DEV Community

Cover image for Sidebar Menu Using HTML and CSS

Sidebar Menu Using HTML and CSS

Foolish Developer on June 20, 2021

In this article you will learn how to create sidebar menu using HTML CSS and JavaScript code. Like the navigation menu bar, the sidebar menu is use...
Collapse
 
ibrokemycomputer profile image
Info Comment hidden by post author - thread only accessible via permalink
Josh Martens

The title suggests this is just HTML and CSS, but the description and steps include JS 😕

I made a couple minor tweaks using the "checkbox trick" so that it is truly just HTML and CSS 🙂 (replaced the .hamburger a with a label, added a hidden input, then changed 4 selectors in the CSS)

codepen.io/ibrokemycomputer/pen/QW...

Happy coding!

Collapse
 
ucode profile image
hassane Ihammouten

awesome bro 👌

Collapse
 
byhaskell profile image
Alexander

thanks bro!)

Collapse
 
remonking4cool profile image
remonking4cool

Fantastic. Please assist with a guide on how to make the sidebar hidden when the page loaded.
Currently, the sidebar show automatically when the page loaded. I don't want the Sidebar to show by default when the page loaded, I want the sidebar to show only when the menu button is click. Can you assist with that.

Thank you as I await feedback.

Collapse
 
kariha_9 profile image
Güven Göç • Edited

You should add a class called "active" to your body tag.

ss

Collapse
 
snuppedeluxe profile image
SnuppeDeluxe

Thank you.
I've searched so long for a nice sidebar.
Now I "know" how to do it at my own :D

Collapse
 
cristoferk profile image
CristoferK

very nice design!

Collapse
 
siddhesh_agarwal profile image
Siddhesh Agarwal

Thanks for the post, it is really helpful!

Collapse
 
motz795 profile image
MOATAZ795

Hello, I have a small YouTube channel to teach beginners HTML & CSS. Can I do the same idea on the channel with reference to your article as a source?

Collapse
 
code_mystery profile image
Foolish Developer

Ok

Collapse
 
asifrazaars323 profile image
asifrazaars323

Magnificent. I shall try

Collapse
 
anirseven profile image
Anirban Majumdar

Thanks a lot , this really helpful

Collapse
 
code_mystery profile image
Foolish Developer

Welcome 😀

Collapse
 
ummeq profile image
Umme Q

Awesome👏

Collapse
 
code_mystery profile image
Foolish Developer

Thank you

Collapse
 
ciesluk profile image
Tom Cieslukowski

Love the design! This is great!

Collapse
 
code_mystery profile image
Foolish Developer

Thank you

Some comments have been hidden by the post's author - find out more