Question 161294 in Html Question posted in
Some basic documentation can be found here.

Can tailwindcss be used to show the mobile menu smoothly in html?

I want to show the mobile menu smoothly. Right now I’m using tailwindcss and when I click on the hamburger icon, the menu comes out instantly. I tried adding delay but it isn’t doing anything. How would I make the mobile menu show smoothly when I click on the hamburger menu

<body>
    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
          <span class="font-semibold text-xl tracking-tight">Menu</span>
        </div>
        <div class="block lg:hidden">
          <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white" id="show-menu">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
        </div>
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto mobile-menu">
          <div class="text-sm lg:flex-grow">
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Docs
            </a>
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Examples
            </a>
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
              Blog
            </a>
          </div>
          <div>
            <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
          </div>
        </div>
      </nav>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>

js

const btn = document.getElementById("show-menu");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
  menu.classList.toggle("hidden");
  menu.classList.toggle("transition")
  menu.classList.toggle("delay-150")
  menu.classList.toggle("duration-300")
});
Tags:

2

Answers


  1. 0 
    .mobile-menu {
  transition-property: max-height;
  max-height: 0;
  overflow: hidden;
}

.mobile-menu.transition-all {
  transition-duration: 300ms;
}


    const btn = document.getElementById("show-menu");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
  menu.classList.toggle("hidden");
  menu.classList.toggle("transition-all");
  menu.classList.toggle("duration-300");
});
    Login or Signup to reply.
  2. 0

    The solution to your approach

    Since you can’t animate element CSS width or height when it set to auto. Check out this thread on this problem.

    1. Added overflow-hidden to your div.mobile-menu.
    2. Add max-h-0 as the initial height.
    3. Toggle max-h-0 and max-h-40 to animate the menu height.

    Check it out at this Codesandbox

    Morden approachs for animating DOM element size

    Calculate & save the element default (auto) width or height using:

    1. Use ResizeObserver API.
    2. Use getBoudingClientRect().

    Remember to set overflow: hidden; to clip their content.
    Then, you can animate them by:

    1. Use Javascript to set their width or height value between the default value and 0.
    2. Set CSS Transition to element that will be animated. Toggle their width or height between the default value and 0.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search