Skip to content

How to make this drop down menus appear on click rather than on hover?

henrymendeez

I was following a tutorial on how to create this nice looking sidebar that expands when hovering and fade in elements but it has a dropdown menu that expands when hovering as well (the desktop version) and I need it to expand only when clicking it.

If you hover over Profile and Notifications menu items they toggle when hovering and I need it to toggle when click.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--========== BOX ICONS ==========-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

    <!--========== CSS ==========-->
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Responsive sidebar submenus</title>
</head>
<body>
    <!--========== HEADER ==========-->
    <header class="header">
        <div class="header__container">
            <img src="https://pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150.jpeg" alt="" class="header__img">

            <a href="#" class="header__logo">YOUR LOGO</a>

            <div class="header__search">
                <input type="search" placeholder="Search" class="header__input">
                <i class='bx bx-search header__icon'></i>
            </div>

            <div class="header__toggle">
                <i class='bx bx-menu' id="header-toggle"></i>
            </div>
        </div>
    </header>

    <!--========== NAV ==========-->
    <div class="nav" id="navbar">
        <nav class="nav__container">
            <div>
                <a href="#" class="nav__link nav__logo">
                    <i class='bx bxs-disc nav__icon' ></i>
                    <span class="nav__logo-name">Bedimcode</span>
                </a>

                <div class="nav__list">
                    <div class="nav__items">
                        <h3 class="nav__subtitle">Profile</h3>

                        <a href="#" class="nav__link active">
                            <i class='bx bx-home nav__icon' ></i>
                            <span class="nav__name">Home</span>
                        </a>
                        
                        <div class="nav__dropdown">
                            <a href="#" class="nav__link">
                                <i class='bx bx-user nav__icon' ></i>
                                <span class="nav__name">Profile</span>
                                <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
                            </a>

                            <div class="nav__dropdown-collapse">
                                <div class="nav__dropdown-content">
                                    <a href="#" class="nav__dropdown-item">Passwords</a>
                                    <a href="#" class="nav__dropdown-item">Mail</a>
                                    <a href="#" class="nav__dropdown-item">Accounts</a>
                                </div>
                            </div>
                        </div>

                        <a href="#" class="nav__link">
                            <i class='bx bx-message-rounded nav__icon' ></i>
                            <span class="nav__name">Messages</span>
                        </a>
                    </div>

                    <div class="nav__items">
                        <h3 class="nav__subtitle">Menu</h3>

                        <div class="nav__dropdown">
                            <a href="#" class="nav__link">
                                <i class='bx bx-bell nav__icon' ></i>
                                <span class="nav__name">Notifications</span>
                                <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
                            </a>

                            <div class="nav__dropdown-collapse">
                                <div class="nav__dropdown-content">
                                    <a href="#" class="nav__dropdown-item">Blocked</a>
                                    <a href="#" class="nav__dropdown-item">Silenced</a>
                                    <a href="#" class="nav__dropdown-item">Publish</a>
                                    <a href="#" class="nav__dropdown-item">Program</a>
                                </div>
                            </div>

                        </div>

                        <a href="#" class="nav__link">
                            <i class='bx bx-compass nav__icon' ></i>
                            <span class="nav__name">Explore</span>
                        </a>
                        <a href="#" class="nav__link">
                            <i class='bx bx-bookmark nav__icon' ></i>
                            <span class="nav__name">Saved</span>
                        </a>
                    </div>
                </div>
            </div>

            <a href="#" class="nav__link nav__logout">
                <i class='bx bx-log-out nav__icon' ></i>
                <span class="nav__name">Log Out</span>
            </a>
        </nav>
    </div>

    <!--========== CONTENTS ==========-->
    <main>
        <section>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
        </section>
    </main>

    <!--========== MAIN JS ==========-->
    <script src="assets/js/main.js"></script>
</body>

I have made a pen with this element so you can see it:

https://codepen.io/henrymendeez/pen/rNjNNdw

Advertisement

Answer

  1. Replace this:
/* Show dropdown collapse */
.nav__dropdown:hover {
  max-height: 100rem;
}

/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
  transform: rotate(180deg);
}

With this:

/* Show dropdown collapse */
.nav__dropdown.open {
  max-height: 100rem;
}

/* Rotate icon arrow */
.nav__dropdown.open .nav__dropdown-icon {
  transform: rotate(180deg);
}
  1. Add this to the javascript:
const navDropdown = document.querySelectorAll(".nav__dropdown");
for (let i = 0; i < navDropdown.length; i++) {
  navDropdown[i].addEventListener("click", () =>
    navDropdown[i].classList.toggle("open")
  );
}


This is what we get:

/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) => {
  const toggleBtn = document.getElementById(headerToggle),
    nav = document.getElementById(navbarId);

  // Validate that variables exist
  if (headerToggle && navbarId) {
    toggleBtn.addEventListener("click", () => {
      // We add the show-menu class to the div tag with the nav__menu class
      nav.classList.toggle("show-menu");
      // change icon
      toggleBtn.classList.toggle("bx-x");
    });
  }
};
showMenu("header-toggle", "navbar");

/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll(".nav__link");

function colorLink() {
  linkColor.forEach((l) => l.classList.remove("active"));
  this.classList.add("active");
}

linkColor.forEach((l) => l.addEventListener("click", colorLink));

const navDropdown = document.querySelectorAll(".nav__dropdown");
for (let i = 0; i < navDropdown.length; i++) {
  navDropdown[i].addEventListener("click", () =>
    navDropdown[i].classList.toggle("open")
  );
}
/*========== GOOGLE FONTS ==========*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*========== VARIABLES CSS ==========*/

:root {
  --header-height: 3.5rem;
  --nav-width: 219px;
  /*========== Colors ==========*/
  --first-color: #6923d0;
  --first-color-light: #f4f0fa;
  --title-color: #19181b;
  --text-color: #58555e;
  --text-color-light: #a5a1aa;
  --body-color: #f9f6fd;
  --container-color: #ffffff;
  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.75rem;
  --smaller-font-size: 0.75rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
   :root {
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}


/*========== BASE ==========*/

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: var(--header-height) 0 0 0;
  padding: 1rem 1rem 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
}

h3 {
  margin: 0;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}


/*========== HEADER ==========*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--container-color);
  box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
  padding: 0 1rem;
  z-index: var(--z-fixed);
}

.header__container {
  display: flex;
  align-items: center;
  height: var(--header-height);
  justify-content: space-between;
}

.header__img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.header__logo {
  color: var(--title-color);
  font-weight: var(--font-medium);
  display: none;
}

.header__search {
  display: flex;
  padding: 0.4rem 0.75rem;
  background-color: var(--first-color-light);
  border-radius: 0.25rem;
}

.header__input {
  width: 100%;
  border: none;
  outline: none;
  background-color: var(--first-color-light);
}

.header__input::placeholder {
  font-family: var(--body-font);
  color: var(--text-color);
}

.header__icon,
.header__toggle {
  font-size: 1.2rem;
}

.header__toggle {
  color: var(--title-color);
  cursor: pointer;
}


/*========== NAV ==========*/

.nav {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  padding: 1rem 1rem 0;
  background-color: var(--container-color);
  box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
  z-index: var(--z-fixed);
  transition: 0.4s;
}

.nav__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3rem;
  overflow: auto;
  scrollbar-width: none;
  /* For mozilla */
}


/* For Google Chrome and others */

.nav__container::-webkit-scrollbar {
  display: none;
}

.nav__logo {
  font-weight: var(--font-semi-bold);
  margin-bottom: 2.5rem;
}

.nav__list,
.nav__items {
  display: grid;
}

.nav__list {
  row-gap: 2.5rem;
}

.nav__items {
  row-gap: 1.5rem;
}

.nav__subtitle {
  font-size: var(--normal-font-size);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-color-light);
}

.nav__link {
  display: flex;
  align-items: center;
  color: var(--text-color);
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.nav__name {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.nav__logout {
  margin-top: 5rem;
}


/* Dropdown */

.nav__dropdown {
  overflow: hidden;
  max-height: 21px;
  transition: 0.4s ease-in-out;
}

.nav__dropdown-collapse {
  background-color: var(--first-color-light);
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.nav__dropdown-content {
  display: grid;
  row-gap: 0.5rem;
  padding: 0.75rem 2.5rem 0.75rem 1.8rem;
}

.nav__dropdown-item {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
}

.nav__dropdown-item:hover {
  color: var(--first-color);
}

.nav__dropdown-icon {
  margin-left: auto;
  transition: 0.4s;
}


/* Show dropdown collapse */

.nav__dropdown.open {
  max-height: 100rem;
}


/* Rotate icon arrow */

.nav__dropdown.open .nav__dropdown-icon {
  transform: rotate(180deg);
}


/*===== Show menu =====*/

.show-menu {
  left: 0;
}


/*===== Active link =====*/

.active {
  color: var(--first-color);
}


/* ========== MEDIA QUERIES ==========*/


/* For small devices reduce search*/

@media screen and (max-width: 320px) {
  .header__search {
    width: 70%;
  }
}

@media screen and (min-width: 768px) {
  body {
    padding: 1rem 3rem 0 6rem;
  }
  .header {
    padding: 0 3rem 0 6rem;
  }
  .header__container {
    height: calc(var(--header-height) + 0.5rem);
  }
  .header__search {
    width: 300px;
    padding: 0.55rem 0.75rem;
  }
  .header__toggle {
    display: none;
  }
  .header__logo {
    display: block;
  }
  .header__img {
    width: 40px;
    height: 40px;
    order: 1;
  }
  .nav {
    left: 0;
    padding: 1.2rem 1.5rem 0;
    width: 68px;
    /* Reduced navbar */
  }
  .nav__items {
    row-gap: 1.7rem;
  }
  .nav__icon {
    font-size: 1.3rem;
  }
  /* Element opacity */
  .nav__logo-name,
  .nav__name,
  .nav__subtitle,
  .nav__dropdown-icon {
    opacity: 0;
    transition: 0.3s;
  }
  /* Navbar expanded */
  .nav:hover {
    width: var(--nav-width);
  }
  /* Visible elements */
  .nav:hover .nav__logo-name {
    opacity: 1;
  }
  .nav:hover .nav__subtitle {
    opacity: 1;
  }
  .nav:hover .nav__name {
    opacity: 1;
  }
  .nav:hover .nav__dropdown-icon {
    opacity: 1;
  }
}
<!--========== BOX ICONS ==========-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

<header class="header">
  <div class="header__container">
    <img src="https://pruebaapp.ga/wp-content/uploads/2021/03/profile-1-150x150.jpeg" alt="" class="header__img">

    <a href="#" class="header__logo">YOUR LOGO</a>

    <div class="header__search">
      <input type="search" placeholder="Search" class="header__input">
      <i class='bx bx-search header__icon'></i>
    </div>

    <div class="header__toggle">
      <i class='bx bx-menu' id="header-toggle"></i>
    </div>
  </div>
</header>

<!--========== NAV ==========-->
<div class="nav" id="navbar">
  <nav class="nav__container">
    <div>
      <a href="#" class="nav__link nav__logo">
        <i class='bx bxs-disc nav__icon'></i>
        <span class="nav__logo-name">Bedimcode</span>
      </a>

      <div class="nav__list">
        <div class="nav__items">
          <h3 class="nav__subtitle">Profile</h3>

          <a href="#" class="nav__link active">
            <i class='bx bx-home nav__icon'></i>
            <span class="nav__name">Home</span>
          </a>

          <div class="nav__dropdown">
            <a href="#" class="nav__link">
              <i class='bx bx-user nav__icon'></i>
              <span class="nav__name">Profile</span>
              <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
            </a>

            <div class="nav__dropdown-collapse">
              <div class="nav__dropdown-content">
                <a href="#" class="nav__dropdown-item">Passwords</a>
                <a href="#" class="nav__dropdown-item">Mail</a>
                <a href="#" class="nav__dropdown-item">Accounts</a>
              </div>
            </div>
          </div>

          <a href="#" class="nav__link">
            <i class='bx bx-message-rounded nav__icon'></i>
            <span class="nav__name">Messages</span>
          </a>
        </div>

        <div class="nav__items">
          <h3 class="nav__subtitle">Menu</h3>

          <div class="nav__dropdown">
            <a href="#" class="nav__link">
              <i class='bx bx-bell nav__icon'></i>
              <span class="nav__name">Notifications</span>
              <i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
            </a>

            <div class="nav__dropdown-collapse">
              <div class="nav__dropdown-content">
                <a href="#" class="nav__dropdown-item">Blocked</a>
                <a href="#" class="nav__dropdown-item">Silenced</a>
                <a href="#" class="nav__dropdown-item">Publish</a>
                <a href="#" class="nav__dropdown-item">Program</a>
              </div>
            </div>

          </div>

          <a href="#" class="nav__link">
            <i class='bx bx-compass nav__icon'></i>
            <span class="nav__name">Explore</span>
          </a>
          <a href="#" class="nav__link">
            <i class='bx bx-bookmark nav__icon'></i>
            <span class="nav__name">Saved</span>
          </a>
        </div>
      </div>
    </div>

    <a href="#" class="nav__link nav__logout">
      <i class='bx bx-log-out nav__icon'></i>
      <span class="nav__name">Log Out</span>
    </a>
  </nav>
</div>

<!--========== CONTENTS ==========-->
<main>
  <section>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
  </section>
</main>

👉 Check it in action on Codepen



If you want the dropdown to close when nav is closed then add this to the script:

const main = document.querySelector("main");
main.addEventListener("mousemove", (e) => {
  for (let i = 0; i < navDropdown.length; i++) {
    navDropdown[i].classList.remove("open");
  }
});

👉 Check it in action on Codepen

panda
User contributions licensed under: CC BY-SA
4 People found this is helpful