Creating a Responsive Sidebar with Icons and Expandable Menus

Kosal Ang

Tue Jan 16 2024

If you're looking to build a responsive sidebar with icons and expandable menus, this HTML and CSS template can serve as a great starting point. Let's break down the key components and features of this template.

The sidebar is designed to provide quick navigation with a clean and organized layout. It includes various menu items, each represented by an icon from Font Awesome. Submenus are also implemented to organize related links.

1<body>
2  <a class="toggle-btn" onclick="toggleSidebar()">
3    <i class="fas fa-bars"></i>
4  </a>
5
6  <div class="sidebar">
7    <a class="btn-close" onclick="toggleSidebar()">
8      <i class="fas fa-close"></i>
9    </a>
10    <ul>
11      <li class="parent">
12        <a href="#"><i class="fas fa-tachometer-alt icon"></i> Dashboard</a>
13      </li>
14
15      <li class="parent">
16        <a href="#"><i class="fas fa-file-alt icon"></i> Posts</a>
17      </li>
18
19      <li class="parent">
20        <a href="#"><i class="fas fa-comments icon"></i> Comments</a>
21        <ul class="sub-menu">
22          <li><a href="#">Pending</a></li>
23          <li><a href="#">Approved</a></li>
24        </ul>
25      </li>
26
27      <!-- Add more links and submenus as needed -->
28    </ul>
29  </div>
30
31  <div class="main-content">
32    <!-- Your main content goes here -->
33    <h1>Main Content Area</h1>
34    <p>This is where your main content will be displayed.</p>
35  </div>
36</body>
37

2. Styling (styles.css)

The styling is minimalistic, focusing on a dark background for the sidebar and a smooth transition effect on hover. The main content area is given a margin to accommodate the expanded sidebar.

1body {
2  margin: 0;
3  font-family: "Arial", sans-serif;
4}
5
6.sidebar {
7  height: 100%;
8  width: 250px;
9  position: fixed;
10  top: 0;
11  left: 0;
12  background-color: #390a57;
13  padding-top: 20px;
14  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
15  transition: width 0.3s;
16}
17
18.sidebar ul {
19  list-style: none;
20  padding: 0;
21}
22
23.sidebar a {
24  display: block;
25  padding: 10px;
26  text-decoration: none;
27  font-size: 18px;
28  color: white;
29  transition: 0.3s;
30}
31
32.sidebar li a:hover {
33  background-color: #6a13a0;
34}
35
36.sidebar .icon {
37    width: 20px;
38    height: 20px;
39  margin-right: 10px;
40}
41
42.sidebar .sub-menu {
43  display: none;
44  padding-left: 40px;
45}
46
47.sidebar .sub-menu a {
48  font-size: 16px;
49}
50
51.main-content {
52  margin-left: 250px;
53  padding: 20px;
54}
55
56/* Media Query for Mobile */
57@media (max-width: 768px) {
58  .sidebar {
59    width: 0;
60    overflow: hidden;
61  }
62
63  .main-content {
64    margin-left: 0;
65  }
66
67  .toggle-btn {
68    display: block !important;
69  }
70
71  .sidebar .btn-close {
72    display: block !important;
73  }
74}
75
76.toggle-btn {
77  display: none;
78  position: fixed;
79  top: 10px;
80  left: 10px;
81  font-size: 20px;
82  color: #333;
83  cursor: pointer;
84}
85
86.sidebar .btn-close {
87  display: none;
88  position: absolute;
89  color: #fff;
90  right: 20px;
91}
92

3. JavaScript Interaction (script.js)

JavaScript is used to toggle the display of submenus when a parent link is clicked. This enhances the user experience, allowing them to expand or collapse relevant sections.

1function toggleSidebar() {
2  var sidebar = document.querySelector(".sidebar");
3  sidebar.style.width = sidebar.style.width === "250px" ? "0" : "250px";
4}
5
6document.addEventListener("DOMContentLoaded", function () {
7  var parentLinks = document.querySelectorAll(".parent");
8
9  parentLinks.forEach(function (link) {
10    link.addEventListener("click", function () {
11      var subMenu = link.querySelector(".sub-menu");
12      if (subMenu) {
13        subMenu.style.display =
14          subMenu.style.display === "block" ? "none" : "block";
15      }
16    });
17  });
18});
19

Conclusion

This template provides a flexible foundation for creating a responsive sidebar with icons and expandable menus. You can further customize it based on your specific requirements and integrate it into your web project.

View Live Demo Download Code Files

javascript html css