Step-by-Step Guide to Building a Collapsible Sidebar with Icons and Text Using CSS, JavaScript, and Font Awesome

byCodepen.tech -
0

Introduction

In this updated guide, we’ll build a collapsible sidebar that toggles between showing only icons and showing both icons and text when expanded. The sidebar will use Font Awesome icons for navigation links. When collapsed, only the icons will be visible, and when expanded, both icons and text will be shown. Users will toggle between the two states by clicking a menu icon.

1. Basic HTML Structure for Collapsible Sidebar with Icons and Text

We will start by creating the basic structure for the sidebar, which will include icons from Font Awesome and text for each navigation item.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsible Sidebar with Icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Collapsible Sidebar -->
  <div id="sidebar" class="sidebar">
    <button id="toggle-btn" class="toggle-btn">
      <i class="fas fa-bars"></i>
    </button>
    <ul>
      <li><a href="#section1"><i class="fas fa-home"></i><span class="link-text">Home</span></a></li>
      <li><a href="#section2"><i class="fas fa-info-circle"></i><span class="link-text">About</span></a></li>
      <li><a href="#section3"><i class="fas fa-envelope"></i><span class="link-text">Contact</span></a></li>
      <li><a href="#section4"><i class="fas fa-cog"></i><span class="link-text">Settings</span></a></li>
    </ul>
  </div>

  <!-- Main Content Area -->
  <div class="content">
    <h2>Collapsible Sidebar Example with Icons and Text</h2>
    <p>Click the menu button to toggle between showing only icons and showing icons with text in the sidebar.</p>
    <section id="section1">
      <h3>Section 1: Home</h3>
      <p>Details about Home...</p>
    </section>
    <section id="section2">
      <h3>Section 2: About</h3>
      <p>Details about About...</p>
    </section>
    <section id="section3">
      <h3>Section 3: Contact</h3>
      <p>Details about Contact...</p>
    </section>
    <section id="section4">
      <h3>Section 4: Settings</h3>
      <p>Details about Settings...</p>
    </section>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML:

  1. Font Awesome Icons:

    • The Font Awesome library is included via a CDN link to add icons in the sidebar. Each navigation item uses an icon followed by a text label (span with class .link-text).

  2. Menu Button:

    • A hamburger menu button is placed at the top of the sidebar (<i class="fas fa-bars"></i>), allowing users to toggle between collapsed and expanded states.

  3. Sidebar Links:

    • Each sidebar link includes an icon (<i>) and a text span (<span class="link-text">) for the label. In the collapsed state, only the icon will be visible, and in the expanded state, both the icon and text will be shown.

2. CSS for Collapsible Sidebar with Icons and Text

We’ll now style the sidebar to toggle between showing only icons (collapsed) and showing both icons and text (expanded). We’ll use CSS transitions for smooth animations.


/* styles.css */

/* General Styling */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100%;
  display: flex;
}

/* Sidebar Styling */
.sidebar {
  height: 100%;
  width: 250px; /* Expanded width */
  background-color: #333;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
  overflow-x: hidden;
}

.sidebar.collapsed {
  width: 80px; /* Collapsed width */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin-top: 50px; /* Space for toggle button */
}

.sidebar ul li {
  padding: 15px 20px;
}

.sidebar ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.sidebar ul li a i {
  margin-right: 15px;
}

.link-text {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .link-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Toggle Button Styling */
.toggle-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

/* Content Area Styling */
.content {
  margin-left: 250px; /* Space for expanded sidebar */
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed ~ .content {
  margin-left: 80px; /* Adjust for collapsed sidebar */
}

section {
  margin-bottom: 40px;
}

Explanation of the CSS:

  1. Sidebar Width:

    • The default width of the sidebar is 250px (expanded), and when the .collapsed class is added, the width changes to 80px.

  2. Icons and Text Visibility:

    • The icons (<i>) are always visible, but the text (.link-text) is only visible when the sidebar is expanded.
    • When the sidebar is collapsed, the .link-text has opacity: 0 and width: 0, effectively hiding the text.

  3. Content Area Adjustment:

    • The content area shifts to the right by 250px when the sidebar is expanded, and by 80px when collapsed, ensuring the content aligns properly.

3. JavaScript for Toggling Sidebar Expansion and Collapse

The JavaScript will toggle between the collapsed and expanded states of the sidebar when the user clicks the menu button.


// scripts.js

const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggle-btn');

// Toggle the sidebar collapse state
toggleBtn.addEventListener('click', function() {
  sidebar.classList.toggle('collapsed');
});

Explanation of the JavaScript:

  1. Toggling Sidebar State:
    • When the toggle button is clicked, the sidebar’s .collapsed class is added or removed, triggering the width and text visibility transitions.

Best Practices for Building a Collapsible Sidebar with Icons

To ensure the sidebar provides a seamless user experience, follow these best practices:

1. Optimize Sidebar for Icons

  • In the collapsed state, users should be able to recognize the icons at a glance. Choose icons that are intuitive and easy to understand without text labels.

2. Provide Smooth Transitions

  • Use CSS transitions to ensure that the sidebar collapses and expands smoothly, providing a more intuitive and responsive user experience.

3. Ensure Accessibility

  • Add ARIA labels to ensure the sidebar and toggle button are accessible to users with disabilities. This is particularly important for screen readers.

<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">&#9776;</button>

4. Optimize for Mobile Users

  • Ensure that the sidebar works well on both desktop and mobile devices by using media queries to adjust the layout on smaller screens. You can make the sidebar fully collapsible on mobile for more space.

Live preview

See the Pen Step-by-Step Guide to Building a Collapsible Sidebar with Icons and Text Using CSS, JavaScript, and Font Awesome by codepen (@codepen-the-selector) on CodePen.



Conclusion

Building a collapsible sidebar with icons and text provides a dynamic, space-saving navigation experience for users. By using Font Awesome icons, you can create a visually appealing and functional sidebar that expands to show text and collapses to show only icons. This step-by-step guide walks you through creating this feature using HTML, CSS, and JavaScript, ensuring a seamless experience on all devices.

Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال