Beautiful form design by all means:
- “Required” dropdown in which you can select “I prefer not to respond”
- Asking for details when you choose not to give a reason
Dude, a switch makes for a terrible dropdown control
Thanks @HID_DEVICE for the video
Profile is a link. Wolt+ is a submenu. Language is a dropdown menu. Contact Support is a link again. Log out is a button.
Welcome to 2025, where nothing has affordances and everything can look like anything else.
If you implement a dropdown menu, make ONE and shove everything into it. No one will remember how you decided to split it between four dropdowns.
Thanks Joe for the video
Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown https://codepen.io/thebabydino/pen/qBJENKM
Based on a thing at a now dead link which did something of the kind with a huge div soup.
#css #js #a11y #dropdown #coding #code #web #dev #webDev #webDevelopment #frontend
Jeez... Draw some borders (it’s a dropdown)
Thanks Fuchen for the video
🔷 Custom dropdowns just got a whole lot easier (finally!)
by @wesbos.com
Artículo acerca de anchor positioning para posicionar elementos como dropdowns dentro del viewport y que no se salgan con css.
Tether elements to each other with CSS anchor positioning | Blog | Chrome for Developers.
https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning ·
#css #dropdown #popover #positioning #scroll
🍒 The Lowdown on Dropdowns in HTML & CSS
by David Darnes @darn.es @daviddarnes at @zeroheight
#webdev #dropdown
https://zeroheight.com/blog/the-lowdown-on-dropdowns-in-html-css/
Самая сложная директива Taiga UI
Часто необходимо знать, с какой областью страницы взаимодействует пользователь. Например, если вы создаете выпадающее меню, нужно понять, когда его закрывать. Наивная реализация будет просто слушать клики и проверять, произошел ли клик вне элемента выпадающего меню. Но мышь — это не единственный способ взаимодействия, не стоит забывать и про клавиатуру. Кроме того, выпадающее меню может иметь вложенную многоуровневую структуру, что делает простую проверку цели клика проблематичной. В этой статье исследуем директиву ActiveZone — подход, который мы использовали в библиотеке компонентов Taiga UI. Она полагается на два моих любимых инструмента Angular: Dependency Injection и RxJS . Нам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного frontend.
https://habr.com/ru/companies/tbank/articles/863842/
#html #dropdown #focus #accessibility #directive #dependency_injection
#Development #Opportunities
CSS anchor positioning is disruptive · “It’s going to unlock some surprising new layouts.” https://ilo.im/160y47
_____
#ModernCSS #Layout #Dropdown #AnchorPositioning #Polyfill #Chrome #Browser #WebDev #CSS
Google, please, make up your mind. Does Save button live in the menu or not? I prefer that it doesn’t, but if it does, make it always the case, otherwise I can’t form a habit
@purplepadma why is there a fucking #Dropdown and not a free-form field?
Ah yes. The famous UI component, drop... input?
I released a new #component called #Language #Dropdown for #MAUI. This displays a dropdown with all the languages in the world with their flags
https://puresourcecode.com/dotnet/maui/language-dropdown-for-maui/
#Development #Techniques
Drop-down menu with modern CSS · CSS now does what once needed tricky scripts https://ilo.im/15zx3d
_____
#ModernCSS #Navigation #Menu #DropDown #Accessibility #WebDev #Frontend #HTML #CSS #Sass