recentpopularlog in

piperh : dropdown   48

Easy Toggle State
a js library to enable typical ui toggle effects and needs, like dropdowns, accordion, collapsible panel, switch, and more. With code examples and with added ARIA.
They say: Only set a few HTML attributes, and code the rest with your CSS skills.
3.6k compressed
webdesign  web  design  js  javascript  script  library  toggle  dropdown  navigation  button  tooltip  collapse  collapsible  modal  popup  switch  checkbox  radio 
june 2018 by piperh
Solved With CSS! Dropdown Menus | CSS-Tricks
Demo of css only dropdown. BEWARE - doesn't work on iPad iOS 9.3.5 Safari & Chrome (7.5.18). On diff demos you can't dismiss menu or it doesn't appear at all.
Works correctly on Huawei (7.5.18) - tap anywhere to dismiss
webdesign  web  design  css  dropdown  menu  css-only  only 
may 2018 by piperh
CSS-Only Nested Dropdown Navigation
css-only dropdown menu with nice easing effect. Also has submenu but only dismissable by touching the menu item, not 'touch anywhere'
webdesign  web  design  menu  navigation  css  dropdown  foldout  nested 
january 2018 by piperh
GitHub - Fabianlindfors/multi.js: A user-friendly replacement for select boxes with multiple attribute enabled
js alternative to select list - moves selected list items from one box to another. Novel, maybe better if there are several selections
webdesign  web  design  select  js  javascript  dropdown  list 
february 2017 by piperh
js and css library for dropdowns. Looks maybe too nerdy for me, but perhaps in the future I wouldn't feel daunted by it. No demos
webdesign  web  design  js  javascript  dropdown  popup  list  select  position 
march 2016 by piperh
Select2 - The jQuery replacement for select boxes
Code for a Select list dropdown/popup using jquery. Allows one to style the list (native browser support doesn't allow styling of the select list in vanilla html/css in all browsers - only firefox I think)
webdesign  web  design  jquery  js  script  select  dropdown  list  popup 
march 2016 by piperh
joeldbirch/superfish · GitHub
not vanilla - requires jQuery. Dropdown menus for hover and touch
webdesign  web  design  menu  dropdown  query  js  javascript  hover  touch 
november 2015 by piperh
SlickNav - Responsive Mobile Menu Plugin for jQuery
interesting looking, simple drop down menu, allows for submenus. Seems to work OK on touch screen and desktop. Can plug in easing effects. ARIA compliant. Compatible back to IE7
responsive  menu  nav  jquery  navigation  webdesign  web  design  toggle  submenu  multi-level  collapse  dropdown 
january 2015 by piperh
Home | Gael Ltd
dropdowns that work on touch screen though on desktop you must click top level item - doesn't work on hover
webdesign  web  design  example  menu  navigation  drop-down  dropdown  touch  screen 
september 2014 by piperh
Touch-friendly drop-down menus
on touchscreen a tap off the menu will dismiss dropdown
web  design  webdesign  menu  nav  navigation  dropdown 
september 2014 by piperh
Accessible Mega Menu
March 2018, this is linked to from a11y 'Patterns' page so I assume it must be still considered good. Requires jQuery.
adobe  mega  menu  accessible  webdesign  web  design  dropdown  flyout  navegation  nav  jquery  script  js 
august 2014 by piperh
Flaunt JS, stylish responsive navigations with nested click to reveal by @toddmotto |
jquery toggle type responsive menu solution. No way to dismiss open dropdown on touch screen. Also, with toggle open, if you open one dropdown then opening another doesn't close the first. And Todd looks suspiciously young
webdesign  web  design  responsive  menu  toggle  submenu  dropdown  hidden 
august 2014 by piperh
Superfish - Suckerfish on 'roids
Not responsive but can be used with meanmenu to make it so, or surely you could make it responsive yourself, no? (its only in the css, surely). In the examples shown you can dismiss dropdown with touch elsewhere. On desktop dropdowns appear on hover
jquery  navigation  menu  css  javascript  js  dropdown  flyout  nav  keyboard  touch  superfish  suckerfish  screen  accessible 
july 2014 by piperh
Flawless clickable drop-down navigation
demo requires click to open dropdown, doesn't open on hover
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Simple jQuery Drop Down Menu in WordPress | Scott Bolinger
the demo doesn't show dropdown on hover - requires click to open. But might be adaptable
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
James Barnett : Make CSS dropdown menus work on touch devices
haven't tested this, needs jQuery, but on the face of it looks straightforward
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Drop-Down Navigation: Responsive and Touch-Friendly — Osvaldas Valutis
a tap outside the drop-down will dismiss it. Also you can toggle the menu symbol on touch screen. Script is short, but requires jquery. Actually it's clunky on the mobile and not good for aria.
navigation  menu  css  responsive  mobile  touch  screen  tap  hover  dropdown  web  design  webdesign 
june 2014 by piperh
Responsive Navigation Demo: Toggle Pattern
accordion dropdown toggle for narrow screens, but needs jquery and uses the checkbox hack (so, not semantic)
rwd  responsive  web  design  webdesign  menu  navigation  toggle  jquery  script  dropdown  checkbox  hack 
may 2014 by piperh

Copy this bookmark:

to read