From cdcac27d0b06e9da42eee5846f61d71702eab953 Mon Sep 17 00:00:00 2001 From: oversu <95a7002b-481b-4ef3-b578-f9c421550aa4@localhost> Date: Thu, 3 Sep 2026 22:21:13 +0200 Subject: [PATCH] =?UTF-8?q?Revoir=20la=20documentation=20du=20menu=20lat?= =?UTF-8?q?=C3=A9ral?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 124 +++++++++++++++++++++++++----------------------------- 1 file changed, 57 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 831fad3..c299f6e 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,90 @@ -![https://nnsprod.com/cloud/s/EMmKxq3kxi6HfB8/preview](https://nnsprod.com/cloud/s/EMmKxq3kxi6HfB8/preview) +# HTML5/CSS3 sidebar without JavaScript -# HTML5/CSS3 Sidebar Menu Without JavaScript - -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 +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 -- **Pure HTML5/CSS3**: No JavaScript required. -- **Responsive Design**: The sidebar adapts to different screen sizes, making it suitable for both desktop and mobile views. -- **Expandable/Collapsible Menu**: The sidebar can be expanded or collapsed with a simple checkbox, enhancing the user interface without adding extra scripts. -- **Dark Mode Support**: Easily switch between light and dark modes using a checkbox input. +- 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. -## 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 +```bash +git clone https://nnsprod.com/git/oversu/html5-css3-sidebar-menu-without-javascript.git +cd html5-css3-sidebar-menu-without-javascript +``` -1. Clone the repository to your local machine: +No dependency installation or build step is required. You can also serve the demonstration locally: - ```bash - git clone https://oversu.fr/git/oversu/html5-css3-sidebar-menu-without-javascript.git - ``` +```bash +python3 -m http.server 8080 +``` -2. Open the `index.html` file in your web browser to view the audio player. +Then visit . -### Key Components +## How it works -1. **Sidebar Structure**: The sidebar is created using a `