html5-css3-sidebar-menu-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.

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.

How It Works

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.

Installation

1. Clone the repository to your local machine:

   git clone https://oversu.fr/git/oversu/html5-css3-sidebar-menu-without-javascript.git
   

2. Open the index.html file in your web browser to view the audio player.

Key Components

1. Sidebar Structure: The sidebar is created using a <nav> element that contains two main sections: a top menu and a bottom menu.

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

3. CSS Transitions: Smooth transitions are applied when the sidebar expands or collapses, and when elements within the sidebar appear or disappear.

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

<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;
}

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

If you have suggestions for improving this project, feel free to submit a pull request or open an issue. Contributions are welcome!