OneTaskBy Tim King · Updated
Animated Dropdown
Fade, Slide or Scale Menus Opening on Click or Hover, Closing on Escape
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Animated Dropdown works
An animated dropdown is a button that opens a small menu of links with a short fade, slide or scale. Type the button text and links, pick the animation and speed, and copy markup, CSS and a few lines of script that handle the keyboard and outside clicks.
The menu is a list of links placed under a real <button>. The button carries aria-expanded,
which tells screen readers whether the menu is open, and the CSS uses that same attribute to show
the menu, so the visual state and the announced state can never disagree.
How the animated dropdown animates
A menu hidden with display: none cannot transition, so the menu is hidden with opacity: 0 and
visibility: hidden instead. Opening changes both along with the transform, and the visibility
transition keeps the menu clickable only when it is shown. Visitors with reduced motion turned on
get an instant open.
Closing the menu
The script closes the menu when the visitor presses Escape, clicks anywhere outside it, or tabs past the last link. Escape also puts focus back on the button, so keyboard users do not lose their place on the page.
FAQ
Is a hover dropdown accessible?
Hover alone is not, because keyboard and touch users cannot hover. The "Hover or click" option keeps the button working for them and only adds hover as a shortcut for mouse users. Avoid hover menus with long gaps between the button and menu, or the menu closes as the pointer crosses the gap.
Why is there no role="menu" on the list?
The ARIA menu role is meant for application menus such as a text editor toolbar, and it changes how screen readers expect the arrow keys to work. A list of site navigation links is better as a plain list under a disclosure button, which is what this generator makes.
How do I make the menu open upwards?
Change top: calc(100% + 0.5rem) to bottom: calc(100% + 0.5rem) on the menu, and set the
transform-origin to bottom left. For the slide effect also change the starting transform to a
positive translateY so it slides up into place.
Can I put more than one dropdown on a page?
Yes. The script loops over every .dropdown-wrap, so each one works on its own. Give each menu a
unique id and point its button's aria-controls at that id so assistive technology links the
right pairs.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
CSS Tooltip Generator
Pure CSS tooltips from a data attribute, with an arrow.
Hover Card Builder
Card hover effects with timing controls, previewed live.
Search Box Builder
Styled search bars with icon, button and focus ring, ready to paste.
Accordion Builder
Build a smooth, accessible accordion from native details elements.