Project demo
Introduction:
In this tutorial, we’ll create a Sidebar Menu using only HTML, CSS. This is a sleek and interactive menu that uses the <details> and <summary> tags to build a toggle effect without JavaScript. The sidebar expands smoothly to reveal navigation links, each with an icon powered by the Ionicons CDN. It’s a beginner-friendly UI component that adds a modern, mobile-friendly touch to any website layout. Perfect for learning HTML semantics, CSS animations, and interactive design!
Watch Full Video Tutorial: Watch
HTML Code:
.
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Toggle Menu</title>
<!-- Ionicons CDN -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<details>
<summary>
<ion-icon name="menu-outline"></ion-icon>
</summary>
<ul>
<li>
<ion-icon name="home-outline"></ion-icon>
<span>Home</span>
</li>
<li>
<ion-icon name="person-outline"></ion-icon>
<span>Profile</span>
</li>
<li>
<ion-icon name="newspaper-outline"></ion-icon>
<span>Blog</span>
</li>
<li>
<ion-icon name="information-circle-outline"></ion-icon>
<span>About</span>
</li>
<li>
<ion-icon name="mail-outline"></ion-icon>
<span>Contact</span>
</li>
<li>
<ion-icon name="settings-outline"></ion-icon>
<span>Settings</span>
</li>
</ul>
</details>
</body>
</html>
.
.
Explanation:
The Ionicons library is included via CDN using both module and nomodule scripts to ensure compatibility across all browsers. A <link> tag connects the external CSS file for styling.
Within the <body>, a <details> element is used to create a toggle mechanism, which expands and collapses the sidebar menu. Inside it, the <summary> tag serves as the clickable button that triggers the toggle, displaying a hamburger-style icon from Ionicons.
Below the summary, an unordered list (<ul>) contains multiple list items (<li>), each representing a navigation link. Each item includes an Ionicon and a corresponding label, such as Home, Profile, Blog, About, Contact, and Settings. This clean semantic structure keeps the layout organized and ensures good accessibility and browser support.
CSS Code:
.
.
:root {
--blue: #1877f2;
--blue-dark: #166fe5;
--blue-light: #e7f3ff;
--text-color: #050505;
--text-secondary: #65676b;
--bg-color: #f0f2f5;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg-color);
}
details {
margin-top: 100px;
margin-left: 400px;
position: relative;
width: fit-content;
}
summary {
list-style: none;
cursor: pointer;
background-color: var(--blue);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
summary:hover {
background-color: var(--blue-dark);
transform: scale(1.05);
}
summary::marker {
display: none;
}
summary::-webkit-details-marker {
display: none;
}
summary ion-icon {
font-size: 1.5rem;
}
details[open] summary {
border-radius: 50% 50% 0 0;
}
ul {
position: absolute;
top: 100%;
left: 0;
background-color: var(--white);
border-radius: 8px;
padding: 20px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 220px;
overflow: hidden;
transform-origin: top center;
animation: scaleIn 0.15s ease-out forwards;
z-index: 100;
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
li {
list-style: none;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
}
li:hover {
background-color: var(--blue-light);
color: var(--blue);
}
li ion-icon {
font-size: 1.2rem;
color: var(--text-secondary);
}
li:hover ion-icon {
color: var(--blue);
}
..
.
Explanation:
The CSS begins by defining custom variables using the :root selector to store commonly used colors, such as different shades of blue, text colors, background color, and white. This makes the design consistent and easy to update.
A universal selector resets margin and padding for all elements, applies box-sizing: border-box, and sets a clean sans-serif font stack for modern typography.
The body is styled with a soft background color to provide a clean and minimal look. The details element is positioned with margins to appear away from the top-left corner, and its width is set to fit its content. The summary is styled as a circular button with a blue background, white icon, and center alignment using Flexbox.
It includes hover and transition effects for a smooth scaling animation. The browser’s default markers for the summary are hidden for a cleaner appearance. When the details element is open, a transition effect is applied to the summary to slightly change its shape.
The dropdown menu (ul) is absolutely positioned below the toggle button, with a white background, rounded corners, and box-shadow for depth. It also features a custom scale-in animation for a smooth entrance. Each menu item (li) is styled with padding, flex layout for icon and text alignment, and hover effects that change background and text colors. The icons are given a secondary text color and also change color on hover for visual feedback.
Source Code:
Download “Sidebar-Menu.7z” Sidebar-Menu.7z – Downloaded 394 times – 1.35 KB
Conclusions:
In conclusion, this project demonstrates how to create a modern and interactive Sidebar Toggle Menu using only HTML and CSS, without the need for JavaScript. By using semantic elements like <details> and <summary>, along with smooth transitions and Ionicons for stylish icons, we achieve a clean and responsive navigation component. This approach is not only lightweight and beginner-friendly but also enhances accessibility and performance, making it a great addition to any modern website.
