recentpopularlog in

piperh : nav   43

WebAIM: "Skip Navigation" Links
WebAIM article about options for 'Skip navigation' link
webdesign  web  design  nav  navigation  accessible  acessibility  skip  main  content  links 
3 days ago by piperh
Build a keyboard-accessible navigation bar with drop-down menus | Atomic Smash
Describes how to use :focus-within pseudo class to make a flyout submenu accessible and visible to keyboard tabbing. A drawback is that it obliges user to tab through whole menu and not to be able to select submenu with spacebar or arrows - I don't know yet how to do that. Add a skip nav feature?
webdesign  web  design  dropdown  flyout  menu  accessible  keyboard  tab  nav  navigation  focus  focus-within 
3 days ago by piperh
Fly-out Menus • Menus • WAI Web Accessibility Tutorials
WCAG code for an accessible flyout. It wouldn't work for me on SCT adaptation, but prob I didn't persist enough
webdesign  web  design  accessible  flyout  dropdown  menu  nav  navigation 
3 days ago by piperh
Mega Menus Work Well for Site Navigation
Nice outline of advantages of mega menus
webdesign  web  design  mega  menu  nav  layout  navigation  ui  ux 
5 days ago by piperh
CSS Layout ∙ Mega menu
example source code for a mega menu (other components available too)
webdesign  web  design  nav  mega  menu  mega-menu  css  code 
5 days ago by piperh
The perfect responsive menu (2019) | Polypane responsive browser
lean css + vanilla js responsive nav menu with toggle for hamburger/menu. Haven't tested it ...
webdesign  web  design  nav  navigation  menu  css  js  javascript  script  responsive  toggle  html 
11 weeks ago by piperh
The circular menu
nice circular pie chart style css popout menu. Uses border-radius and clip-path
webdesign  web  design  css  menu  pop-out  slide-out  circular  fan  nav 
june 2019 by piperh
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons! | CSS-Tricks
some poss layout methods for achieving triangular pointing end of ribbon sections
webdesign  web  design  breadcrumb  ribbon  trail  css  nav  navigation 
may 2019 by piperh
Bootstrap Scrollspy
a w3schools implementation of clickable scrolling, using Bootstrap's scrollspy method
webdesign  web  design  page  scroll  tab  nav  navigation  scrollspy 
may 2019 by piperh
Priority Nav Scroller - Priority+ navigation in a horizontal scrollable container with controls
Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don’t fit on screen they are hidden in a horizontal scrollable container with controls.
Responsive - when window is wide enough, the arrows disappear.
webdesign  web  design  navigation  horizontal  scroll  priority  scroller  nav  js  javascript  script 
july 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
Building Mega Menus with Flexbox — SitePoint
walkthrough of building a mega menu using flexbox. Be sceptical about this, perhaps - check that it works on everything and is properly thought through. How does dismiss work?
webdesign  web  design  flex  flexbox  menu  megamenu  mega  nav  navigation 
july 2017 by piperh
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
example of a menu with progressively hidden items using only css.
'More' always shows so you must always have at least 1 hidden item otherwise it's confusing
webdesign  web  design  navigation  menu  flexbox  css  nav  responsive  hide  hidden  progressively  example 
july 2016 by piperh
Responsive & Fixed One Page Nav
very nice js functionality for show/hide menu and one-page navigation. the icon transform is css only though the toggle clss needs script. No jQuery needed or other external dependency.
webdesign  web  design  vanilla  js  javascript  navigation  nav  responsive  menu  icon  hamburger  X  transform  transition  css  html 
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
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
Implementing Off-Canvas Navigation For A Responsive Website | Smashing Magazine
"... by transitioning elements with 3-D transforms, the browser can generate render layers that are hardware-accelerated. There’s no need for JavaScript to worry about style or m-q breakpoints. JavaScript need only interpret user interaction and apply classes to maintain states - CSS defines the visual changes." Smooth on mobile.
webdesign  web  design  navigation  responsive  off-canvas  menu  css  nav  slide  slider 
august 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
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
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
CSS: Responsive Navigation Menu
three-line menu symbol toggles on hover - so may not work for touch screen
css  mobile  navigation  responsive  nav  web  design  webdesign  tutorial  resource  menu  phone  screen  html5  html5shiv 
february 2013 by piperh
Fly-out Menu - Interaction Design Pattern Library -
good serious article about flyouts and their actual usage in navigation
navigation  flyout  menu  web  design  webdesign  nav  about  menus  use  usage 
february 2013 by piperh

Copy this bookmark:

to read