Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025

    How to make Animated Chair Product Page using HTML & CSS

    30 September 2025

    How to create Heart and Star Animation using HTML CSS and JS

    27 September 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Hoverable Sidebar Menu using HTML CSS & JavaScript
    JavaScript

    How to make Hoverable Sidebar Menu using HTML CSS & JavaScript

    Coding StellaBy Coding Stella12 January 2024Updated:13 January 2024No Comments7 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hey there, coding enthusiasts! Today, let’s create a cool Hoverable Sidebar Menu using HTML, CSS, and JavaScript. It’s simple, no need for anything complicated – just the basics to add a functional sidebar to your projects.

    Whether you’re a coding pro or just starting out, this tutorial is a great way to improve your skills and bring a practical touch to your websites.

    Join me on this relaxed coding journey into the world of Hoverable Sidebar Menus. Let’s keep it simple and create something both practical and visually appealing. Ready to add a neat sidebar to your projects?

    Let’s get started on our Hoverable Sidebar Menu adventure – the easy way!

    HTML :

    The given code is an HTML document that represents a navigation sidebar menu with a hover effect. It includes a sidebar with a logo, search input, and a list of menu items. Each menu item has an icon, a label, and a tooltip. The code also includes a profile section at the bottom with a profile image, name, job title, and a logout button.

    The main content section is a placeholder for the dashboard. The code utilizes the Boxicons library for the icons.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Navigation | Hoverable Sidebar Menu | CodingStella</title>
      <link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'><link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="sidebar">
      <div class="logo-details">
        <i class='bx bxl-c-plus-plus icon'></i>
        <div class="logo_name">CodingStella</div>
        <i class='bx bx-menu' id="btn"></i>
      </div>
      <ul class="nav-list">
        <li>
          <i class='bx bx-search'></i>
          <input type="text" placeholder="Search...">
          <span class="tooltip">Search</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-grid-alt'></i>
            <span class="links_name">Dashboard</span>
          </a>
          <span class="tooltip">Dashboard</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-user'></i>
            <span class="links_name">User</span>
          </a>
          <span class="tooltip">User</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-chat'></i>
            <span class="links_name">Messages</span>
          </a>
          <span class="tooltip">Messages</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-pie-chart-alt-2'></i>
            <span class="links_name">Analytics</span>
          </a>
          <span class="tooltip">Analytics</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-folder'></i>
            <span class="links_name">File Manager</span>
          </a>
          <span class="tooltip">Files</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-cart-alt'></i>
            <span class="links_name">Order</span>
          </a>
          <span class="tooltip">Order</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-heart'></i>
            <span class="links_name">Saved</span>
          </a>
          <span class="tooltip">Saved</span>
        </li>
        <li>
          <a href="#">
            <i class='bx bx-cog'></i>
            <span class="links_name">Setting</span>
          </a>
          <span class="tooltip">Setting</span>
        </li>
        <li class="profile">
          <div class="profile-details">
            <img src="https://drive.google.com/uc?export=view&id=1ETZYgPpWbbBtpJnhi42_IR3vOwSOpR4z" alt="profileImg">
            <div class="name_job">
              <div class="name">Stella Army</div>
              <div class="job">Web designer</div>
            </div>
          </div>
          <i class='bx bx-log-out' id="log_out"></i>
        </li>
      </ul>
    </div>
    <section class="home-section">
      <div class="text">Dashboard</div>
    </section>
    <!-- partial -->
      <script  src="./script.js"></script>
    
    </body>
    </html>

    CSS :

    The provided code is a CSS stylesheet for a sidebar navigation menu. It includes styles for the sidebar container, logo, menu items, search input, and profile section. The sidebar can be toggled open and closed, and it includes tooltips for the menu items. The code also includes media queries for responsive design.

    /* Google Font Link */
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 78px;
      background: #11101d;
      padding: 6px 14px;
      z-index: 99;
      transition: all 0.5s ease;
    }
    .sidebar.open {
      width: 250px;
    }
    .sidebar .logo-details {
      height: 60px;
      display: flex;
      align-items: center;
      position: relative;
    }
    .sidebar .logo-details .icon {
      opacity: 0;
      transition: all 0.5s ease;
    }
    .sidebar .logo-details .logo_name {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      opacity: 0;
      transition: all 0.5s ease;
    }
    .sidebar.open .logo-details .icon,
    .sidebar.open .logo-details .logo_name {
      opacity: 1;
    }
    .sidebar .logo-details #btn {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      font-size: 22px;
      transition: all 0.4s ease;
      font-size: 23px;
      text-align: center;
      cursor: pointer;
      transition: all 0.5s ease;
    }
    .sidebar.open .logo-details #btn {
      text-align: right;
    }
    .sidebar i {
      color: #fff;
      height: 60px;
      min-width: 50px;
      font-size: 28px;
      text-align: center;
      line-height: 60px;
    }
    .sidebar .nav-list {
      margin-top: 20px;
      height: 100%;
    }
    .sidebar li {
      position: relative;
      margin: 8px 0;
      list-style: none;
    }
    .sidebar li .tooltip {
      position: absolute;
      top: -20px;
      left: calc(100% + 15px);
      z-index: 3;
      background: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 400;
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      transition: 0s;
    }
    .sidebar li:hover .tooltip {
      opacity: 1;
      pointer-events: auto;
      transition: all 0.4s ease;
      top: 50%;
      transform: translateY(-50%);
    }
    .sidebar.open li .tooltip {
      display: none;
    }
    .sidebar input {
      font-size: 15px;
      color: #fff;
      font-weight: 400;
      outline: none;
      height: 50px;
      width: 100%;
      width: 50px;
      border: none;
      border-radius: 12px;
      transition: all 0.5s ease;
      background: #1d1b31;
    }
    .sidebar.open input {
      padding: 0 20px 0 50px;
      width: 100%;
    }
    .sidebar .bx-search {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      font-size: 22px;
      background: #1d1b31;
      color: #fff;
    }
    .sidebar.open .bx-search:hover {
      background: #1d1b31;
      color: #fff;
    }
    .sidebar .bx-search:hover {
      background: #fff;
      color: #11101d;
    }
    .sidebar li a {
      display: flex;
      height: 100%;
      width: 100%;
      border-radius: 12px;
      align-items: center;
      text-decoration: none;
      transition: all 0.4s ease;
      background: #11101d;
    }
    .sidebar li a:hover {
      background: #fff;
    }
    .sidebar li a .links_name {
      color: #fff;
      font-size: 15px;
      font-weight: 400;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: 0.4s;
    }
    .sidebar.open li a .links_name {
      opacity: 1;
      pointer-events: auto;
    }
    .sidebar li a:hover .links_name,
    .sidebar li a:hover i {
      transition: all 0.5s ease;
      color: #11101d;
    }
    .sidebar li i {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      border-radius: 12px;
    }
    .sidebar li.profile {
      position: fixed;
      height: 60px;
      width: 78px;
      left: 0;
      bottom: -8px;
      padding: 10px 14px;
      background: #1d1b31;
      transition: all 0.5s ease;
      overflow: hidden;
    }
    .sidebar.open li.profile {
      width: 250px;
    }
    .sidebar li .profile-details {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
    }
    .sidebar li img {
      height: 45px;
      width: 45px;
      object-fit: cover;
      border-radius: 6px;
      margin-right: 10px;
    }
    .sidebar li.profile .name,
    .sidebar li.profile .job {
      font-size: 15px;
      font-weight: 400;
      color: #fff;
      white-space: nowrap;
    }
    .sidebar li.profile .job {
      font-size: 12px;
    }
    .sidebar .profile #log_out {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: #1d1b31;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-radius: 0px;
      transition: all 0.5s ease;
    }
    .sidebar.open .profile #log_out {
      width: 50px;
      background: none;
    }
    .home-section {
      position: relative;
      background: #e4e9f7;
      min-height: 100vh;
      top: 0;
      left: 78px;
      width: calc(100% - 78px);
      transition: all 0.5s ease;
      z-index: 2;
    }
    .sidebar.open ~ .home-section {
      left: 250px;
      width: calc(100% - 250px);
    }
    .home-section .text {
      display: inline-block;
      color: #11101d;
      font-size: 25px;
      font-weight: 500;
      margin: 18px;
    }
    @media (max-width: 420px) {
      .sidebar li .tooltip {
        display: none;
      }
    }

    JavaScript:

    The provided code is a JavaScript code snippet that adds functionality to a sidebar menu. When the close button (#btn) or the search button (.bx-search) is clicked, the sidebar toggles between being open and closed. The menuBtnChange() function is responsible for changing the icon displayed on the close button based on the state of the sidebar. If the sidebar is open, the icon is changed to a right arrow, and if the sidebar is closed, the icon is changed back to a menu icon.

    let sidebar = document.querySelector(".sidebar");
    let closeBtn = document.querySelector("#btn");
    let searchBtn = document.querySelector(".bx-search");
    closeBtn.addEventListener("click", () => {
      sidebar.classList.toggle("open");
      menuBtnChange(); //calling the function(optional)
    });
    searchBtn.addEventListener("click", () => {
      // Sidebar open when you click on the search iocn
      sidebar.classList.toggle("open");
      menuBtnChange(); //calling the function(optional)
    });
    // following are the code to change sidebar button(optional)
    function menuBtnChange() {
      if (sidebar.classList.contains("open")) {
        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right"); //replacing the iocns class
      } else {
        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu"); //replacing the iocns class
      }
    }

    There you have it! We’ve successfully created a sleek Hoverable Sidebar Menu using HTML, CSS, and JavaScript. It’s simple, functional, and ready to enhance your web projects. Great job on completing the tutorial!

    In case you face any glitches during your project, don’t stress. The source code is at your fingertips. Hit the Download button and commence your coding escapade. Wishing you joyful coding!

    Hover Effect hoverable sidebar menu sidebar
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Old Aesthetic Calculator using HTML & CSS
    Next Article How to make Double Slider Signup-Login Form in HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Heart and Star Animation using HTML CSS and JS

    27 September 2025
    JavaScript

    How to create Cards Beam Animation using HTML CSS and JS

    25 September 2025
    JavaScript

    How to create Order Button Animation using HTML CSS and JS

    22 September 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202428K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202425K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202421K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202414K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    Backend Developer Skills: Definition, Languages & Examples

    16 February 2024

    How to make Monster Tooth Toggle button using HTML CSS

    25 March 2024

    How to make Space Parallax Scrolling using HTML CSS & JavaScript

    13 January 2024

    How to make Dynamic Glassmorphism Login Form using HTML & CSS

    14 August 2024
    Latest Post

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025

    How to make Animated Chair Product Page using HTML & CSS

    30 September 2025

    How to create Heart and Star Animation using HTML CSS and JS

    27 September 2025

    How to create Cards Beam Animation using HTML CSS and JS

    25 September 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood