Search
Hide Scrollbars During an Animation
24.6.2020
CSS still can’t animate to auto dimensions.
.dropdown {
transition: 0.2s;
height: 0;
}
.dropdown.open {
/* the height will change, but it won't animate. */
height: auto;
}
There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back....
Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects
20.5.2020
I was reading Anna Kaley’s “Listboxes vs. Dropdown Lists” post the other day. It’s a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single...
Stop Using “Dropdown”
16.3.2020
Adrian Roselli notes that it might actually mean:
A <select> menu
An ARIA Listbox, Combobox, Menu, or Disclosure Widget
An input with a <datalist>
An input with autocomplete
A <details><summary> block
An accordion
Flyout navigation
In my own usage, I tend to mean...
I Pressed ⌘B. You Wouldn’t Believe What Happened Next
9.3.2020
This talk by Marcin Wichary is — beyond both enthusiastic and outstanding — all about the complexity of UI design, typography, and the lengths his team at Figma has gone to make sure that doing something as simple as selecting a font from a dropdown does what you expect it to.
I’d recommend this...
Collective #559
21.10.2019
Zero * ECSY * The problem with dropdown fields * Webwide * Gridsome * CoBeats * Faster Layouts with CSS Grid (and Subgrid!)
Collective #559 was written by Pedro Botelho and published on Codrops
Menus with “Dynamic Hit Areas”
3.7.2019
Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should work with clicks and taps, too. Without that, you've broken the menu for anyone without a mouse. That doesn't mean you can't also use :hover....
Solved with CSS! Logical Styling Based on the Number of Given Elements
26.7.2018
This post is the third in a series about the power of CSS.
Article Series:
Colorizing SVG Backgrounds
Dropdown Menus
Logical Styling Based On the Number of Given Elements (this post)
Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical...
5 Most Common Dropdown Use Cases Solved with React Downshift
26.6.2018
Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for buildin
Container-Adapting Tabs With “More” Button
2.5.2018
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve....
Solved With CSS! Dropdown Menus
1.5.2018
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.
Let’s see if we can make...