Expanding Dropdown Menu In JavaScript

As more and more people start using their mobiles to browse the web, it is more important than ever to make sure that your website is mobile friendly.

This is a modern, mobile-friendly navigation system that enables a hamburger button to expand and collapse a dropdown menu with smooth slide animations. Have fun with it.

Written entirely in plain JavaScript, HTML, and CSS. No third-party frameworks or libraries are needed.

How to use it:

1. Code the HTML for the dropdown menu.

<div class="navigation">
  <div class="userBx">
    <div class="imgBx">
      <img src="user.jpg" alt="user avatar" />
    </div>
    <p class="username">CSSScript</p>
  </div>
  <div class="menuToggle"></div>
  <ul class="menu">
    <li>
      <a href="#">Profile</a>
    </li>
    <li>
      <a href="#">Message</a
      >
    </li>
    <li>
      <a href="#">Notification</a
      >
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
    <li>
      <a href="#">Help</a
      >
    </li>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

2. The necessary CSS styles for the dropdown menu.

.navigation {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 60px;
  background: #fff;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  transition: height 0.5s, width 0.5s;
  transition-delay: 0s, 0.75s;
  overflow: hidden;
}
.navigation.active {
  width: 300px;
  height: 400px;
  transition: width 0.5s, height 0.5s;
  transition-delay: 0s, 0.75s;
}
.navigation .userBx {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
  transition-delay: 0.5s;
}
.navigation.active .userBx {
  width: calc(100% - 60px);
  transition-delay: 0s;
}
.navigation .userBx .username {
  white-space: nowrap;
  color: #555;
  font-size: 1.1em;
}
.navigation .userBx .imgBx {
  position: relative;
  min-width: 60px;
  height: 60px;
  overflow: hidden;
  background: #000;
  border-radius: 50%;
  border: 10px solid #fff;
}
.navigation .userBx .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 60px;
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.menu li {
  list-style: none;
}
.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 1em;
  text-decoration: none;
  color: #555;
}
.menu li a:hover {
  color: #4e65ff;
}
.menu li a ion-icon {
  font-size: 1.5em;
}

3. Apply CSS styles to the hamburger toggle button.

.navigation .menuToggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation .menuToggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #555;
  transform: translateY(-10px);
  box-shadow: 0 10px #555;
  transition: 0.5s;
}
.navigation .menuToggle::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #555;
  transform: translateY(10px);
  transition: 0.5s;
}
.navigation.active .menuToggle::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 #555;
}
.navigation.active .menuToggle::after {
  transform: translateY(0px) rotate(-45deg);
}

4. The required JavaScript to toggle CSS classes based on the menu state.

let menuToggle = document.querySelector(".menuToggle");
let navigation = document.querySelector(".navigation");
menuToggle.onclick = function () {
  navigation.classList.toggle("active");
};