Column 1 Content
Here’s a fully responsive vertical navigation menu built with only HTML and CSS — no JavaScript required.
It uses the CSS :checked pseudo-class with a hidden checkbox to toggle the menu on smaller screens.
HTML + CSS Code
Html
Responsive Vertical Menu (No JS)
How It Works
Checkbox Toggle
The hidden checkbox (#menu-checkbox) is linked to the label (.menu-toggle).
When clicked, it changes the :checked state.
CSS-Only Show/Hide
In mobile view (max-width: 767px), the menu is hidden by default.
When the checkbox is checked, the adjacent ul is displayed.
Responsive Behavior
On larger screens, the menu is always visible as a vertical sidebar.
On smaller screens, it collapses into a hamburger menu.
If you want, I can also make a sliding animation so the vertical menu smoothly appears from the side without JavaScript.
Do you want me to add that?