# 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.

[![Sidebar preview](https://nnsprod.com/cloud/s/EMmKxq3kxi6HfB8/preview)](https://nnsprod.com/cloud/s/EMmKxq3kxi6HfB8)

Additional previews: [expanded sidebar](https://nnsprod.com/cloud/s/dMXXy6mtBDe6r82) · [compact sidebar](https://nnsprod.com/cloud/s/54dCLeyE5RnyHgN)

## 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`:

```bash
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:

```bash
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 (`~`):

```html
<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:

```css
#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

```text
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](LICENSE) for the complete terms.