HTML5/CSS3 sidebar without JavaScript

A small responsive sidebar demonstration implemented with semantic HTML and CSS only. Its open and closed states are controlled by a checkbox and the :checked pseudo-class, so no JavaScript is required.

Features

• collapsible navigation controlled entirely by CSS;
• separate top and bottom menu areas;
• compact icon-only state and expanded label state;
• content offset that follows the sidebar width;
• responsive adjustments for tablets and phones;
• easy-to-replace links, labels and logos.

Quick start

Clone the repository, then open menu.html:

git clone https://nnsprod.com/git/oversu/html5-css3-sidebar-menu-without-javascript.git
cd html5-css3-sidebar-menu-without-javascript

No dependency installation or build step is required. You can also serve the demonstration locally:

python3 -m http.server 8080

Then visit http://localhost:8080/menu.html.

How it works

The checkbox must appear before the sidebar and content because the CSS uses the general sibling selector (~):

<input type="checkbox" id="toggle-sidebar" hidden>

<nav class="sidebar close">
    <label for="toggle-sidebar" class="toggle" aria-label="Toggle navigation">☰</label>

    <div class="menu top-menu">
        <ul>
            <li>
                <a href="#">
                    <i class="fa fa-commenting-o" aria-hidden="true"></i>
                    <span>Link</span>
                </a>
            </li>
        </ul>
    </div>
</nav>

<main class="content">
    <!-- page content -->
</main>

When the checkbox is checked, these rules expand the navigation and move the content:

#toggle-sidebar:checked ~ .sidebar {
    width: 250px;
}

#toggle-sidebar:checked ~ .content {
    margin-left: 250px;
}

Edit the dimensions and colours in style.css to match your layout. Menu entries can be added or removed independently in .top-menu and .bottom-menu.

Project structure

menu.html  Demonstration markup
style.css  Sidebar states and responsive presentation
logo.png   Example logo used by the menu
LICENSE    Apache License 2.0

Browser and implementation notes

• Font Awesome 4.7 is imported from an external CDN for the example icons.
• The stylesheet uses :has() for one logo-specific rule; current evergreen browsers support it.
• A hidden toggle-dark-mode checkbox and a few related selectors remain in the demonstration stylesheet, but no visible dark-mode control is currently wired in menu.html.
• Replace placeholder links and alternative text before integrating the component into a real site.

License

Distributed under the Apache License 2.0. See LICENSE for the complete terms.