Revoir la documentation du menu latéral
This commit is contained in:
parent
08550ff2c9
commit
cdcac27d0b
1 changed files with 55 additions and 65 deletions
120
README.md
120
README.md
|
|
@ -1,100 +1,90 @@
|
||||||
|
# HTML5/CSS3 sidebar without JavaScript
|
||||||
|
|
||||||
# HTML5/CSS3 Sidebar Menu 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.
|
||||||
|
|
||||||
This repository contains a pure HTML5/CSS3 implementation of a responsive sidebar menu. The sidebar is fully functional without relying on any JavaScript, making it lightweight and easy to integrate into any project. The menu is responsive, with the ability to expand and collapse based on user interaction, providing a smooth user experience.
|
|
||||||
|
|
||||||
https://nnsprod.com/cloud/s/dMXXy6mtBDe6r82
|
|
||||||
https://nnsprod.com/cloud/s/54dCLeyE5RnyHgN
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Pure HTML5/CSS3**: No JavaScript required.
|
- collapsible navigation controlled entirely by CSS;
|
||||||
- **Responsive Design**: The sidebar adapts to different screen sizes, making it suitable for both desktop and mobile views.
|
- separate top and bottom menu areas;
|
||||||
- **Expandable/Collapsible Menu**: The sidebar can be expanded or collapsed with a simple checkbox, enhancing the user interface without adding extra scripts.
|
- compact icon-only state and expanded label state;
|
||||||
- **Dark Mode Support**: Easily switch between light and dark modes using a checkbox input.
|
- content offset that follows the sidebar width;
|
||||||
|
- responsive adjustments for tablets and phones;
|
||||||
|
- easy-to-replace links, labels and logos.
|
||||||
|
|
||||||
## How It Works
|
## Quick start
|
||||||
|
|
||||||
The sidebar menu leverages CSS transitions and the `:checked` pseudo-class to manage the expanded and collapsed states. The menu items are organized in a vertical layout with icons and text labels. When the sidebar is collapsed, only the icons are visible, and the text labels are hidden.
|
Clone the repository, then open `menu.html`:
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
1. Clone the repository to your local machine:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://oversu.fr/git/oversu/html5-css3-sidebar-menu-without-javascript.git
|
git clone https://nnsprod.com/git/oversu/html5-css3-sidebar-menu-without-javascript.git
|
||||||
|
cd html5-css3-sidebar-menu-without-javascript
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Open the `index.html` file in your web browser to view the audio player.
|
No dependency installation or build step is required. You can also serve the demonstration locally:
|
||||||
|
|
||||||
### Key Components
|
```bash
|
||||||
|
python3 -m http.server 8080
|
||||||
|
```
|
||||||
|
|
||||||
1. **Sidebar Structure**: The sidebar is created using a `<nav>` element that contains two main sections: a top menu and a bottom menu.
|
Then visit <http://localhost:8080/menu.html>.
|
||||||
|
|
||||||
2. **Checkbox Inputs**: The visibility and state of the sidebar are controlled using hidden checkbox inputs:
|
## How it works
|
||||||
- `#toggle-sidebar`: Controls the sidebar's expanded/collapsed state.
|
|
||||||
- `#toggle-dark-mode`: Toggles dark mode.
|
|
||||||
- `#toggle-profile-menu`: Manages the visibility of a submenu.
|
|
||||||
|
|
||||||
3. **CSS Transitions**: Smooth transitions are applied when the sidebar expands or collapses, and when elements within the sidebar appear or disappear.
|
The checkbox must appear before the sidebar and content because the CSS uses the general sibling selector (`~`):
|
||||||
|
|
||||||
4. **Optionnal Top or Bottom menu**: You can add or remove the top/bottom menu. If you need one... or two !
|
|
||||||
|
|
||||||
### Example Code
|
|
||||||
|
|
||||||
Here's a quick example of how the sidebar is structured:
|
|
||||||
|
|
||||||
HTML
|
|
||||||
```html
|
```html
|
||||||
|
<input type="checkbox" id="toggle-sidebar" hidden>
|
||||||
|
|
||||||
<nav class="sidebar close">
|
<nav class="sidebar close">
|
||||||
<label for="toggle-sidebar" class="toggle">☰</label>
|
<label for="toggle-sidebar" class="toggle" aria-label="Toggle navigation">☰</label>
|
||||||
|
|
||||||
<div class="menu top-menu">
|
<div class="menu top-menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#"><i class="fa fa-commenting-o"></i><span>Blog</span></a></li>
|
<li>
|
||||||
<li><a href="#"><i class="fa fa-code"></i><span>AEOS</span></a></li>
|
<a href="#">
|
||||||
<!-- More items here -->
|
<i class="fa fa-commenting-o" aria-hidden="true"></i>
|
||||||
</ul>
|
<span>Link</span>
|
||||||
</div>
|
</a>
|
||||||
|
</li>
|
||||||
<div class="menu bottom-menu">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#"><i class="fa fa-code-fork"></i><span>GIT</span></a></li>
|
|
||||||
<li><a href="#"><i class="fa fa-file-text-o"></i><span>Wiki</span></a></li>
|
|
||||||
<!-- More items here -->
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<!-- page content -->
|
||||||
|
</main>
|
||||||
```
|
```
|
||||||
|
|
||||||
CSS
|
When the checkbox is checked, these rules expand the navigation and move the content:
|
||||||
```css
|
|
||||||
.sidebar {
|
|
||||||
width: 60px;
|
|
||||||
transition: width 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
```css
|
||||||
#toggle-sidebar:checked ~ .sidebar {
|
#toggle-sidebar:checked ~ .sidebar {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar a {
|
#toggle-sidebar:checked ~ .content {
|
||||||
display: flex;
|
margin-left: 250px;
|
||||||
align-items: center;
|
|
||||||
color: #ddd;
|
|
||||||
transition: color 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar a i {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
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
|
## License
|
||||||
|
|
||||||
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
|
Distributed under the Apache License 2.0. See [LICENSE](LICENSE) for the complete terms.
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
If you have suggestions for improving this project, feel free to submit a pull request or open an issue. Contributions are welcome!
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue