mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Server stats:

8.4K
active users

#dropdown

0 posts0 participants0 posts today
Grumpy Website<p>Beautiful form design by all means:</p><p>- “Required” dropdown in which you can select “I prefer not to respond”<br>- Asking for details when you choose not to give a reason</p><p><a href="https://mastodon.online/tags/Amazon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Amazon</span></a> <a href="https://mastodon.online/tags/Required" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Required</span></a> <a href="https://mastodon.online/tags/Optional" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Optional</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/Form" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Form</span></a></p>
Grumpy Website<p>Attention! You have 1 unread button</p><p>Thanks @vanadium23 for the picture</p><p><a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/Badge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Badge</span></a> <a href="https://mastodon.online/tags/Notification" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Notification</span></a></p>
Grumpy Website<p>Dude, a switch makes for a terrible dropdown control</p><p>Thanks @HID_DEVICE for the video</p><p><a href="https://mastodon.online/tags/Telegram" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Telegram</span></a> <a href="https://mastodon.online/tags/Switch" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Switch</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/Affordance" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Affordance</span></a></p>
Grumpy Website<p>Profile is a link. Wolt+ is a submenu. Language is a dropdown menu. Contact Support is a link again. Log out is a button.</p><p>Welcome to 2025, where nothing has affordances and everything can look like anything else.</p><p><a href="https://mastodon.online/tags/Wolt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Wolt</span></a> <a href="https://mastodon.online/tags/Button" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Button</span></a> <a href="https://mastodon.online/tags/Link" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Link</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/Affordance" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Affordance</span></a></p>
Grumpy Website<p>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.</p><p>Thanks Joe for the video</p><p><a href="https://mastodon.online/tags/AzureDevOps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AzureDevOps</span></a> <a href="https://mastodon.online/tags/Microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Microsoft</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a></p>
Grumpy Website<p>Dropdowns that take you to a different page...</p><p>Thanks Fuchen for the video</p><p><a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a></p>
Ana Tudor 🐯<p>Made this a couple of years ago on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown <a href="https://codepen.io/thebabydino/pen/qBJENKM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBJ</span><span class="invisible">ENKM</span></a></p><p>Based on a thing at a now dead link which did something of the kind with a huge div soup.</p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>js</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Grumpy Website<p>Jeez... Draw some borders (it’s a dropdown)</p><p>Thanks Fuchen for the video</p><p><a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/Minimalism" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Minimalism</span></a> <a href="https://mastodon.online/tags/YouTube" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>YouTube</span></a></p>
Jakob Miksch<p>I am looking for a lightweight <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/compontent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>compontent</span></a> library for <a href="https://mastodon.social/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>react</span></a> <a href="https://mastodon.social/tags/nextjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nextjs</span></a> , ideally compatible with <a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/tailwindcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwindcss</span></a> only with basic components like <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/dialog" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dialog</span></a> <a href="https://mastodon.social/tags/modal" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>modal</span></a> <a href="https://mastodon.social/tags/popover" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>popover</span></a> <a href="https://mastodon.social/tags/button" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>button</span></a> <a href="https://mastodon.social/tags/checkbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>checkbox</span></a> <br>any tips?</p>
pablolarah<p>🔷 Custom dropdowns just got a whole lot easier (finally!)<br>by @wesbos.com </p><p><a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> </p><p><a href="https://youtu.be/MA9WAHEEfGM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">youtu.be/MA9WAHEEfGM</span><span class="invisible"></span></a></p>
Jesús Cuadra<p>Artículo acerca de anchor positioning para posicionar elementos como dropdowns dentro del viewport y que no se salgan con css. <br>Tether elements to each other with CSS anchor positioning &nbsp;|&nbsp; Blog &nbsp;|&nbsp; Chrome for Developers. <br><a href="https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.chrome.com/blog/teth</span><span class="invisible">er-elements-to-each-other-with-css-anchor-positioning</span></a> · <br><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/popover" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>popover</span></a> <a href="https://mastodon.social/tags/positioning" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>positioning</span></a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scroll</span></a></p>
Jesús Cuadra<p>Artículo acerca de popover API en html para hacer tooltips o dropdowns sólo con html y también con js sencillo. <br>Future of CSS: Popover API - DEV Community. <br><a href="https://dev.to/link2twenty/future-of-css-popover-api-3ba0" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dev.to/link2twenty/future-of-c</span><span class="invisible">ss-popover-api-3ba0</span></a><br>#<a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/modal" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>modal</span></a> <a href="https://mastodon.social/tags/popover" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>popover</span></a> <a href="https://mastodon.social/tags/tooltip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tooltip</span></a> <a href="https://mastodon.social/tags/article" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>article</span></a></p>
pablolarah<p>🍒 The Lowdown on Dropdowns in HTML &amp; CSS<br>by David Darnes @darn.es <span class="h-card" translate="no"><a href="https://threads.net/@daviddarnes/" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>daviddarnes</span></a></span> at <span class="h-card" translate="no"><a href="https://mastodon.social/@zeroheight" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>zeroheight</span></a></span> <br><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> </p><p><a href="https://zeroheight.com/blog/the-lowdown-on-dropdowns-in-html-css/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">zeroheight.com/blog/the-lowdow</span><span class="invisible">n-on-dropdowns-in-html-css/</span></a></p>
Habr<p>Самая сложная директива Taiga UI</p><p>Часто необходимо знать, с какой областью страницы взаимодействует пользователь. Например, если вы создаете выпадающее меню, нужно понять, когда его закрывать. Наивная реализация будет просто слушать клики и проверять, произошел ли клик вне элемента выпадающего меню. Но мышь — это не единственный способ взаимодействия, не стоит забывать и про клавиатуру. Кроме того, выпадающее меню может иметь вложенную многоуровневую структуру, что делает простую проверку цели клика проблематичной. В этой статье исследуем директиву ActiveZone — подход, который мы использовали в библиотеке компонентов Taiga UI. Она полагается на два моих любимых инструмента Angular: Dependency Injection и RxJS . Нам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного frontend.</p><p><a href="https://habr.com/ru/companies/tbank/articles/863842/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/tbank/ar</span><span class="invisible">ticles/863842/</span></a></p><p><a href="https://zhub.link/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://zhub.link/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://zhub.link/tags/focus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>focus</span></a> <a href="https://zhub.link/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> <a href="https://zhub.link/tags/directive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>directive</span></a> <a href="https://zhub.link/tags/dependency_injection" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dependency_injection</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Opportunities" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Opportunities</span></a><br>CSS anchor positioning is disruptive · “It’s going to unlock some surprising new layouts.” <a href="https://ilo.im/160y47" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/160y47</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.social/tags/AnchorPositioning" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AnchorPositioning</span></a> <a href="https://mastodon.social/tags/Polyfill" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Polyfill</span></a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Chrome</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Grumpy Website<p>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</p><p><a href="https://mastodon.online/tags/YouTube" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>YouTube</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/WatchLater" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WatchLater</span></a></p>
Kevin Karhan :verified:<p><span class="h-card" translate="no"><a href="https://beige.party/@purplepadma" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>purplepadma</span></a></span> why is there a fucking <a href="https://infosec.space/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> and not a free-form field?</p><ul><li>Next thing we see dropdowns for names and if one's one of the &lt;0,5% most common it's fucked! </li></ul><p><a href="https://infosec.space/tags/Enshittification" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Enshittification</span></a> <a href="https://infosec.space/tags/Forms" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Forms</span></a> <a href="https://infosec.space/tags/Titles" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Titles</span></a> <a href="https://infosec.space/tags/Pronouns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Pronouns</span></a></p>
Grumpy Website<p>Ah yes. The famous UI component, drop... input?</p><p><a href="https://mastodon.online/tags/Figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Figma</span></a> <a href="https://mastodon.online/tags/Dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Dropdown</span></a> <a href="https://mastodon.online/tags/TextInput" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TextInput</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Drop-down menu with modern CSS · CSS now does what once needed tricky scripts <a href="https://ilo.im/15zx3d" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/15zx3d</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Navigation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Navigation</span></a> <a href="https://mastodon.social/tags/Menu" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Menu</span></a> <a href="https://mastodon.social/tags/DropDown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DropDown</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a></p>
Th3OneRav3nNSFW AREOLA REVEAL