JavaScript

5 Simple Ways to Implement a Dropdown Menu with jQuery

 

This article introduces 5 simple ways to implement a dropdown menu using jQuery. It covers techniques like slideUp/slideDown, addClass/removeClass, and other useful methods.

Contents
  1. Using jQuery’s slideUp/slideDown
  2. Using jQuery’s addClass/removeClass
  3. jQueryのfadeIn/fadeOutを使う
  4. Using jQuery’s toggleClass
  5. Using jQuery’s slideToggle
  6. Summary

Using jQuery’s slideUp/slideDown

Here’s an implementation of a dropdown menu using jQuery’s slideUp and slideDown methods.

 

HTML

The .menuSub class contains the content that is displayed when the mouse hovers over it.

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

The .menuSub class is initially set to display: none; to hide it. The display toggle is managed by jQuery functions.

Other CSS rules are for styling the appearance.

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuery/JS

When hovering over .menu li, the .menuSub is displayed using slideDown(). When the hover is removed, .menuSub is hidden using slideUp().

The :not(:animated) selector is essential. By using this, it prevents additional actions from being added while an animation is already running.

  $(function() {
    $("ul.menu li").hover(
      function() {
        $(".menuSub:not(:animated)", this).slideDown();
      },
      function() {
        $(".menuSub", this).slideUp();
      }
    );
  });

 

Using jQuery’s addClass/removeClass

Here is the implementation of a dropdown menu using jQuery’s addClass/removeClass.

 

HTML

The part with the class .menuSub is the content that will be displayed when hovered over with the mouse.

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

There are two main points:

  1. Set display: none; for the .menuSub class to keep it hidden.
  2. Set display: block; for the .menuSub.open class so that it becomes visible when hovered.

For the second point, when the mouse hovers, the jQuery implementation adds the .open class to the .menuSub element to display it.

Other CSS settings are for styling purposes.

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

/*.openが付与された時、表示の設定*/
.menuSub.open {
  display: block;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuery/JS

When the mouse hovers, the addClass() method adds the .open class to the .menuSub element. Since the CSS settings display .menuSub.open, the menu will be shown.

When the mouse hover is removed, the removeClass() method removes the .open class. As per the CSS settings, .menuSub is set to be hidden, so the menu will be hidden.

  $(function() {
    $(".menu li").hover(
      function() {
        //クラス名「open」を付与する
        $(this).children(".menuSub").addClass("open");
        //hoverが外れた場合
      }, function() {
        //クラス名「open」を取り除く
        $(this).children(".menuSub").removeClass("open");
      }
    );
  });

 

jQueryのfadeIn/fadeOutを使う

In this method, fadeIn and fadeOut are used to control the menu’s visibility with a smooth fade animation. This makes the dropdown menu’s display more visually pleasant. The fade effect is applied through the hover event, so when the user hovers over the menu, the sub-menu gradually appears, and when the mouse is moved away, it gradually disappears.

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").hover(
    function() {
      $(this).children(".menuSub").fadeIn();
    },
    function() {
      $(this).children(".menuSub").fadeOut();
    }
  );
});

 

Using jQuery’s toggleClass

In this method, toggleClass is used to control the display and hiding of the submenu. By adding or removing the open class in response to the hover event, the styles defined in CSS are applied or removed accordingly. This makes toggling the state very simple, improving the readability and maintainability of the code.

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub.open {
  display: block;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").hover(
    function() {
      $(this).children(".menuSub").toggleClass("open");
    },
    function() {
      $(this).children(".menuSub").toggleClass("open");
    }
  );
});

 

Using jQuery’s slideToggle

slideToggle is a method that toggles the visibility of an element with a sliding animation. In this method, the sub-menu is either slid open or closed in response to a click event. By using the sliding effect, it provides users with a visual cue, making the opening and closing of the menu feel more intuitive.

 

HTML

<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

CSS

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

 

jQuey/JS

$(function() {
  $(".menu li").click(function() {
    $(this).children(".menuSub").slideToggle();
  });
});

 

Summary

In this article, we introduced various ways to implement a dropdown menu using jQuery.

  • Using slideUp/slideDown and addClass/removeClass: Controls the opening and closing of the menu with animation effects.
  • Using toggleClass: Adds and removes classes simply to toggle the menu’s visibility instantly.
  • Using slideToggle: Provides a concise implementation of the slide animation to toggle the menu’s state with a click event.
  • Using fadeIn/fadeOut: Smoothly controls the visibility of the menu with a fade effect.

Each method can be chosen based on the desired menu behavior and user experience. Whether you want to emphasize animation effects or simply toggle the menu state depends on the specific use case, so feel free to customize and choose the appropriate method. Try implementing the one that best suits your project.

RELATED POST