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

Html – Animating a (pure) flex box menu fly-out., in PicoCSS

I made a responsive CSS-only hamburger menu, designed to be "compatible" with PicoCSS. This means that the usual nav menu is simply a row-based flexbox, per PicoCSS documentation. My menu works, as the codepen link demonstrates, but it isn’t animated. I attempted an animation, hoping the menu would "grow" vertically, but the animation isn’t working at all.

I suspect this is because, to keep the menu simple, I used a media-query to convert the full-screen, row-based menu options into a mobile "column-based, wrapped, max-width: 100%, max-height:fit-content" flex. That sudden change was probably too much for the animation to sort out.

Regardless, any ideas of how to make this "grow vertically" animation happen? I definitely want to do this CSS-only (no JavaScript) if at all possible.

If I need a more fundamental "shift" in how I approach this, that’s ok, but I still want to remain as close as possible to the original simplicity that PicoCSS was promoting.

Actually, I’d also like to know how to make the links of the "fly-out" menu be selectable anywhere within their boundaries. As is, I can only select them if I click on the text itself.

Tags:

2

Answers


  1. 0

    To achieve the "grow vertically" animation for your responsive CSS-only hamburger menu, you can use CSS transitions to smoothly transition the height of the menu container.
    To add the animation, we’ll use the max-height property and CSS transitions. Instead of switching between different flex layouts directly, we’ll use a class to toggle the expanded state. The animation will be triggered by adding/removing this class to the menu container.
    Here’s the updated CSS for the animation:

    .menu-expanded {
  max-height: 1000px; /* A large enough value to accommodate all menu items */
  transition: max-height 0.3s ease; /* Adjust the duration and easing as needed */
}

    Now, update the JavaScript to toggle the menu-expanded class when the hamburger menu is clicked:

    const hamburger = document.querySelector(".hamburger");
const menu = document.querySelector(".menu");

hamburger.addEventListener("click", () => {
  menu.classList.toggle("menu-expanded");
});
    Login or Signup to reply.
  2. 0

    max-height:fit-content; is not "transitionable". You need a fixed value.

    I’d use something like max-height:100vh;

    For more info see: https://css-tricks.com/using-css-transitions-auto-dimensions/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search