8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Tutorials

Tutorials Details

Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only

Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only

November 6, 2024

HTML(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Menu with Clickable Dropdown</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Toggle Checkbox for Sidebar (Hidden) -->
    <input type="checkbox" id="sidebar-toggle" hidden>

    <!-- Sidebar -->
    <div class="sidebar">
        <label for="sidebar-toggle" class="close-btn">&times;</label>
        <h2>Sidebar Menu</h2>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>

            <!-- Services with Clickable Dropdown -->
            <li>
                <input type="checkbox" id="dropdown-toggle" hidden>
                <label for="dropdown-toggle" class="dropdown-btn">
                    Services <span class="dropdown-icon">▼</span>
                </label>
                <ul class="dropdown-content">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">App Development</a></li>
                    <li><a href="#">SEO Services</a></li>
                </ul>
            </li>

            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="content">
        <label for="sidebar-toggle" class="open-btn">&#9776; Menu</label>
        <h1>Welcome to the Page</h1>
        <p>Click the Menu button to open the sidebar.</p>
    </div>

</body>
</html>

CSS(style.css)

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Sidebar Styling */
.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    overflow-y: auto;
    transition: 0.3s;
    padding-top: 20px;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 20px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    padding: 15px;
    text-align: center;
}

.sidebar ul li a,
.dropdown-btn {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.sidebar ul li a:hover,
.dropdown-btn:hover {
    background-color: #575757;
}

/* Checkbox Toggle for Sidebar */
#sidebar-toggle:checked ~ .sidebar {
    left: 0;
}

/* Close Button Styling */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: white;
    text-decoration: none;
    display: block;
}

/* Main Content */
.content {
    margin-left: 0;
    padding: 20px;
    transition: margin-left 0.3s;
}

/* Move Content Right when Sidebar is Open */
#sidebar-toggle:checked ~ .content {
    margin-left: 250px;
}

/* Open Button Styling */
.open-btn {
    font-size: 24px;
    cursor: pointer;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    display: inline-block;
    margin-bottom: 20px;
}

/* Dropdown Styling */
.dropdown-content {
    display: none;
    background-color: #444;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-content li {
    text-align: left;
    padding-left: 20px;
}

.dropdown-content li a {
    padding: 10px;
    color: white;
    display: block;
    text-decoration: none;
}

.dropdown-content li a:hover {
    background-color: #575757;
}

/* Show dropdown when checkbox is checked */
#dropdown-toggle:checked ~ .dropdown-content {
    display: block;
}

/* Dropdown Icon Styling */
.dropdown-icon {
    font-size: 12px;
    transition: transform 0.3s;
}

/* Rotate icon when dropdown is open */
#dropdown-toggle:checked + .dropdown-btn .dropdown-icon {
    transform: rotate(180deg);
}
 

HTML Explanation

  1. Checkboxes (#sidebar-toggle and #dropdown-toggle): Hidden checkboxes control the sidebar toggle and dropdown without using JavaScript. These checkboxes are used with CSS selectors to show or hide elements when checked.
  2. Sidebar (.sidebar): Contains the main navigation links. It’s positioned off-screen initially and is shown when the sidebar toggle checkbox is checked.
  3. Dropdown: Inside the "Services" menu, the dropdown is toggled by a checkbox (#dropdown-toggle) and has links like "Web Development" and "SEO Services." The <label> for this checkbox includes an icon (▼) to indicate it’s a dropdown.
  4. Main Content: Contains a menu button (&#9776;) to open the sidebar. When clicked, it checks the sidebar toggle checkbox.

CSS Explanation

  1. Basic Reset (*): Removes default padding, margin, and sets box-sizing: border-box for uniform sizing.
  2. Sidebar Styling (.sidebar): Positioned off-screen with left: -250px and transitions into view (left: 0) when the sidebar toggle checkbox is checked.
  3. Main Content Shifting: When the sidebar is open, the main content moves to the right using margin-left.
  4. Dropdown Styling: The .dropdown-content is hidden by default (display: none) and is shown when the dropdown toggle checkbox is checked.
  5. Dropdown Icon (.dropdown-icon): The icon rotates (transform: rotate(180deg)) when the dropdown is open, visually indicating the expanded state.

This setup creates a responsive sidebar and a dropdown without JavaScript, using CSS transitions and hidden checkboxes for interactivity.

Categories

Recent post

Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
November 7, 2024
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
November 7, 2024
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
November 6, 2024
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
How to Create a Responsive Card with Hover Effects in CSS
November 4, 2024
How to Create a Responsive Card with Hover Effects in CSS

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
How to Create a Responsive Card with Hover Effects in CSS

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO