DEV Community

Cover image for jQuery Animated Dropdown Menu - IA Dropdown
Code And Deploy
Code And Deploy

Posted on

4 2

jQuery Animated Dropdown Menu - IA Dropdown

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery-plugins/jquery-animated-dropdown-menu-ia-dropdown

In this post, I will show you how to implement an animated dropdown menu using jquery a library that makes our dropdown menu interactive.

jquery-animated-dropdown-menu

How to use the animated dropdown jquery plugin?

Step 1: Load Animated Dropdown CSS assets.

<link href="/path/to/assets/css/main.css" rel="stylesheet" />
Enter fullscreen mode Exit fullscreen mode

Step 2: Load Animated Dropdown Javascript assets

<!-- jquery  -->
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"
></script>

<!-- main script  -->
<script src="assets/js/ia-dropdown.min.js"></script>
<script src="assets/js/main.js"></script>

Enter fullscreen mode Exit fullscreen mode

Step 3: Add basic dropdown menu

<div
    data-dropdown-wrapper="">
    <div>
        <button data-dropdown-trigger="trigger">
            Example
        </button>
    </div>
    <div data-dropdown-menu="">
        <div class="py-1" role="none">
          <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
          <a
            href="#">Account settings</a
          >
          <a
            href="#">Support</a
          >
          <a
            href="#">License</a
          >
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize the jquery ia-dropdown.js plugin.

function handleDropdowns() {
  const dropdowns = $("[data-dropdown-wrapper]").each(function (
    index,
    wrapper
  ) {
    const dropdown = new Dropdown({ wrapper, transformOrigin: false }).init();
  });
}
$(function () {
  handleDropdowns();
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Here is the full source code of our animated dropdown menu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IA-DROPDOWN - A Jquery Script</title>
    <link href="assets/css/main.css" rel="stylesheet" />

  </head>
  <body class="text-gray-800">
    <div class="max-w-7xl mx-auto">
      <!-- intro  -->
      <div class="p-6">
        <h1 class="text-3xl text-center font-bold mb-3">IA-DROPDOWN</h1>
        <!-- block  -->
        <div class="p-4 rounded-lg text-sm bg-gray-200 text-gray-900">
          <p class="mb-2 text-center">
            This library is powered by <b>JQUERY</b> and it helps you setup
            dropdowns quickly and simply.
          </p>
        </div>
        <br />
      </div>
      <!-- preview  -->
      <div class="p-16 pb-32 flex">
        <div
          data-dropdown-wrapper=""
          class="relative inline-block text-left mx-auto"
        >
          <div>
            <button
              data-dropdown-trigger="trigger"
              type="button"
              class="
                inline-flex
                justify-center
                w-full
                rounded-md
                border border-gray-300
                shadow-sm
                px-4
                py-2
                bg-white
                text-sm
                font-medium
                text-gray-700
                hover:bg-gray-50
                focus:outline-none
                focus:ring-2
                focus:ring-offset-2
                focus:ring-offset-gray-100
                focus:ring-indigo-500
              "
              id="menu-button"
              aria-expanded="true"
              aria-haspopup="true"
            >
              Example
              <!-- Heroicon name: solid/chevron-down -->
              <svg
                class="-mr-1 ml-2 h-5 w-5"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </div>
          <div
            data-dropdown-menu=""
            style="opacity: 0"
            class="
              origin-top-right
              absolute
              right-0
              mt-2
              w-56
              rounded-md
              shadow-lg
              bg-white
              ring-1 ring-black ring-opacity-5
              focus:outline-none
            "
            role="menu"
            aria-orientation="vertical"
            aria-labelledby="menu-button"
            tabindex="-1"
          >
            <div class="py-1" role="none">
              <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
              <a
                href="#"
                class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100"
                role="menuitem"
                tabindex="-1"
                id="menu-item-0"
                >Account settings</a
              >
              <a
                href="#"
                class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100"
                role="menuitem"
                tabindex="-1"
                id="menu-item-1"
                >Support</a
              >
              <a
                href="#"
                class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100"
                role="menuitem"
                tabindex="-1"
                id="menu-item-2"
                >License</a
              >
              <form method="POST" action="#" role="none">
                <button
                  type="submit"
                  class="
                    text-gray-700
                    block
                    w-full
                    text-left
                    px-4
                    py-2
                    text-sm
                    hover:bg-red-100
                  "
                  role="menuitem"
                  tabindex="-1"
                  id="menu-item-3"
                >
                  Sign out
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jquery  -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <!-- main script  -->
    <script src="assets/js/ia-dropdown.min.js"></script>
    <script src="assets/js/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This helpful jQuery plugin is developed by issam1994.

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery-plugins/jquery-animated-dropdown-menu-ia-dropdown if you want to download this code.

Happy coding :)

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay