Pure HTML5/CSS3 Sidemenu, responsive, lightweight and No Javascript ! Only 5kb !
Alexandre NOEL ed0dbb051d Update picture | 1 month ago | |
---|---|---|
LICENSE | 1 month ago | |
README.md | 1 month ago | |
logo.png | 1 month ago | |
menu.html | 1 month ago | |
style.css | 1 month ago |
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.
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 to your local machine:
git clone https://oversu.fr/git/oversu/html5-css3-sidebar-menu-without-javascript.git
Open the index.html
file in your web browser to view the audio player.
Sidebar Structure: The sidebar is created using a <nav>
element that contains two main sections: a top menu and a bottom menu.
Checkbox Inputs: The visibility and state of the sidebar are controlled using hidden checkbox inputs:
#toggle-sidebar
: Controls the sidebar's expanded/collapsed state.#toggle-dark-mode
: Toggles dark mode.#toggle-profile-menu
: Manages the visibility of a submenu.CSS Transitions: Smooth transitions are applied when the sidebar expands or collapses, and when elements within the sidebar appear or disappear.
Optionnal Top or Bottom menu: You can add or remove the top/bottom menu. If you need one... or two !
Here's a quick example of how the sidebar is structured:
HTML
<nav class="sidebar close">
<label for="toggle-sidebar" class="toggle">☰</label>
<div class="menu top-menu">
<ul>
<li><a href="#"><i class="fa fa-commenting-o"></i><span>Blog</span></a></li>
<li><a href="#"><i class="fa fa-code"></i><span>AEOS</span></a></li>
<!-- More items here -->
</ul>
</div>
<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>
</div>
</nav>
CSS
.sidebar {
width: 60px;
transition: width 0.3s ease-in-out;
}
#toggle-sidebar:checked ~ .sidebar {
width: 250px;
}
.sidebar a {
display: flex;
align-items: center;
color: #ddd;
transition: color 0.3s ease-in-out;
}
.sidebar a i {
margin-right: 10px;
}
This project is licensed under the MIT License. See the LICENSE file for more details.
If you have suggestions for improving this project, feel free to submit a pull request or open an issue. Contributions are welcome!