This project demonstrates a simple, responsive sidebar toggle using only HTML and CSS. The toggle functionality is achieved through the use of the :checked
pseudo-class, providing an interactive experience without JavaScript.
- CSS-Only Toggle: Uses the
:checked
pseudo-class to show and hide the sidebar. - Simple and Clean Interface: Easy-to-navigate sidebar with smooth transitions.
- Clone the Repository:
git clone https://github.com/Saksham1367/Sidebar-using-HTML-And-Css-.git
- Open the Project:
- Navigate to the project directory.
- Open
index.html
in your browser to see the sidebar in action.
- The sidebar is initially hidden off-screen.
- A checkbox input acts as a toggle switch, and its state is controlled by labels acting as buttons.
- When the checkbox is checked, the sidebar slides into view, utilizing CSS transitions.
- Modify the styles in
styles.css
to change the appearance of the sidebar, buttons, and content area. - Update the HTML in
index.html
to add more links or sections as needed.
- HTML
- CSS