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
 
byhaskell profile image
Alexander •

thanks bro!)

Collapse
 
ucode profile image
hassane Ihammouten •

awesome bro 👌

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
 
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
 
anirseven profile image
Anirban Majumdar •

Thanks a lot , this really helpful

Collapse
 
code_mystery profile image
Foolish Developer •

Welcome 😀

Collapse
 
cristoferk profile image
CristoferK •

very nice design!

Collapse
 
ummeq profile image
Umme Q •

Awesome👏

Collapse
 
code_mystery profile image
Foolish Developer •

Thank you

Collapse
 
asifrazaars323 profile image
asifrazaars323 •

Magnificent. I shall try

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
 
siddhesh_agarwal profile image
Siddhesh Agarwal •

Thanks for the post, it is really helpful!

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