recentpopularlog in

piperh : toggle   47

Stop Misusing Toggle Switches
about use of toggle switch, checkbox and button, according to context and state
webdesign  web  design  checkbox  switch  toggle  button  state  action  control  contextual  ux  ui 
8 days ago by piperh
The Challenges with Single Toggle Buttons
short piece about intuitive usability of toggle switches. Things to consider - helpful notes about state and options
webdesign  web  design  toggle  switch  style  ui  ux  usability  intuitive 
5 weeks ago by piperh
Under-Engineered Toggles | Adrian Roselli
css-only toggles using the checkbox default browser functionality
webdesign  web  design  toggle  css-only  css  accessible  accessibility  checkbox  default 
may 2019 by piperh
Hacking Custom Checkboxes And Radios – Hacker Noon
about styling custom checkboxes and radio buttons, while maintaining accessibility
webdesign  web  design  checkbox  toggle  switch  radio  button  css  default  customise  style  accessible 
april 2019 by piperh
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
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
Filament Group article about coding accessible toggle button for visually hidden content (eg, a nav menu)
webdesign  web  design  toggle  menu  nav  responsive  accessible  accessibility  hidden  visually 
january 2018 by piperh
Patterns - The A11Y Project
very handy code and script library for frequent actions and features: dropdowns, accordions, tabs, toggles, buttons, modals, tooltips and more.
webdesign  web  design  code  coding  js  javascript  script  toggle  modal  button  breadcrumb  aria  accessible  accessibility  pattern  menu  accordion  tab  tooltip  player 
november 2017 by piperh
Designing The Perfect Accordion – Smashing Magazine
detailed look at design for expanding accordion menus and items, especially (I think) on mobile
webdesign  web  design  accordion  menu  expand  collapse  expanding  collapsing  slideout  ui  ux  show  hide  toggle 
june 2017 by piperh
Toggleclass with pure Javascript | Snippet Repo
vanilla js snippet for toggling a class on an element. Only worked with getElementById, wouldn't work with getElementsByTagName
Used it on poh template for slide-in menu
webdesign  web  design  js  javascript  script  toggle  vanilla  toggleclass 
may 2017 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
april 2017 by piperh
CSS sidebar toggle
css only sidebar toggle with a bit of js for accessibility, aria states and tab index. Very smooth. I think it uses transformX but need to study it more. See orig article for breakdown. view in compiled mode. Code is absurdly complicated by convoluted font-size vh guff but the sidebar transition is good
webdesign  web  design  css  menu  sidebar  toggle  css-only  aria  accessible  code 
april 2017 by piperh
Element.classList - Web APIs | MDN
mdn reference page showing possible methods to use with element.classList: you can toggle classes, add, remove and other stuff I don't fully understand
webdesign  web  design  code  coding  js  javascript  script  element  classlist  reference  method  add  remove  toggle 
november 2016 by piperh
#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend | CSS-Tricks
brilliant little tutorial showing how to use vanilla js event listener, for click. Ideal for toggling a style on an element on click, but has many other possibilities. "event" could be many other things than click, and classList could be many other things than "toggle"
webdesign  web  design  js  javascript  script  event  listener  toggle  add  remove  class  css  state  code  coding 
november 2016 by piperh
Simple JavaScript class toggle using classList
codepen showing use of vanilla js to toggle a class. Shows the html, css and js. In this case the class is toggled on a different element to the clicked one. Play with it!
Instead of 'click' you can use 'mouseover'. Or instead of toggle you can add or remove.
webdesign  web  design  js  javascript  vanilla  code  coding  css  html  toggle  class  add  remove  element 
july 2016 by piperh
Introducing A11y Toggle
great code snippet for vanilla js toggle script
webdesign  web  design  js  javascript  vanilla  toggle  aria  script  details  summary  style  css 
march 2016 by piperh
visibility experiments
codepen showing a poss use of visibility and a button. BUT NOTE - there's some vanilla js that implentents toggle ! Could this be used without jQuery? Would be great
webdesign  web  design  toggle  javascript  js  visibility  visible  hidden  css  html 
january 2016 by piperh
CSS Toggle Switch: Accessible CSS toggle switch using standard form controls
some pre-made css toggle switches. Nicely done but LOTS of css just to achieve these. Would need pruning to get rid of unused styles.
webdesign  web  design  css  toggle  switch  checkbox  code  coding 
november 2015 by piperh
Google no longer indexing content in onLoad hidden sections? - Google SEO News and Discussion forum at WebmasterWorld - WebmasterWorld
webmasterworld forum discussion page about search results for text which is initially hidden but is present within html
webdesign  web  design  text  google  ranking  seo  toggle  toggled  search  serp  hidden  index 
november 2015 by piperh
desandro/classie · GitHub
lightweight vanilla js for adding removing toggling classes, but could be too nerdy for me. No instructions, no manual of how to apply or what events it could react to.
webdesign  web  design  js  javascript  add  remove  toggle  class  css  vanilla 
may 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
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
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
Responsive Nav — Responsive Navigation Plugin
on git-hub there's a multiple-levels branch but has two niggles. You can't dismiss opened dropdown on touch screen, and you can't swipe if you touch on a menu item with sublink in it.
I'm not sure if above is still true (10.5.15) - in any case seems to work nice on menu without submenu
Rec'd by Philippe Wittenbergh on css list.
webdesign  web  design  responsive  mobile  menu  js  javascript  navigation  nav  code  coding  toggle  three-line  script  vanilla 
may 2014 by piperh
SelectNav.js - responsive drop-down menu - pure JavaScript
at narrow screens menu becomes a Select list. Could be useful but not pretty - depends on browser defaults for style of Select button and popup list
webdesign  web  design  responsive  hidden  menu  slider  toggle  javascript 
march 2014 by piperh
Steal These Responsive Navigation Menu Ideas | Moboom
summary of hidden menu techniques for responsive. No code or tutorials, just a resumé of types with some discussion of advantages/disadvantages
responsive  webdesign  web  design  hidden  menu  toggle  summary  resume  techniques 
march 2014 by piperh

Copy this bookmark:

to read