recentpopularlog in

piperh : navigation   116

« earlier  
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 
11 weeks ago by piperh
Bootstrap Scrollspy
a w3schools implementation of clickable scrolling, using Bootstrap's scrollspy method
webdesign  web  design  page  scroll  tab  nav  navigation  scrollspy 
12 weeks ago by piperh
Naming things to improve accessibility
how browsers use the accessibility tree in the dom
webdesign  web  design  accessibility  tree  accessible  dom  names  naming  navigation 
may 2019 by piperh
Your skip links are broken - Axess Lab
their intro: Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
webdesign  web  design  accessibility  accessible  navigation  skip  links  a11y 
august 2018 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
Assessing Loading Performance in Real Life with Navigation and Resource Timing  |  Web Fundamentals  |  Google Developers
Google developers article about using 2 APIs to assess RUM (Real User Monitoring) - they say better than measuring synthetic performance. If I could understand it, probably useful for improving speed
webdesign  web  design  webdev  performance  speed  loading  api  rum  navigation  timing  resource  testing 
july 2018 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
Designing Accessible Navigations – UX Planet
article title: Designing Accessible Navigations
some v useful tips, especially "skip to content", keyboard shortcuts, structure and lables
webdesign  web  design  accessibility  accessible  navigation  skip 
april 2018 by piperh
Sticky Slider Navigation (Responsive)
moving underline effect on menu as you scroll, to show current active part of list
webdesign  web  design  menu  navigation  effect  sticky  underline  scroll 
january 2018 by piperh
Progress Nav
interesting effect on menu as you scroll - highlights to current active part of list
webdesign  web  design  scroll  effect  menu  navigation 
january 2018 by piperh
Morphing Hamburger Menu with CSS
nice 'growing' effect for a hamburger menu. Author calls it morphing
webdesign  web  design  menu  navigation  effect  css 
january 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
Mega drop-down menus - Behavioural Research Consultancy
discussion of megamenus usability and issues, but not code howto
webdesign  web  design  navigation  megamenu  mega  menu  usability 
july 2017 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
Birdview
they say: Get a glance at a whole web page with an aerial view.
Seems to work OK on desktop and iPad
webdesign  web  design  overview  view  birdseye  page  webpage  birdview  whole  navigation  javascript  js 
june 2017 by piperh
Great Alternatives to Hamburger Menus
article suggesting alternative navigation methods
webdesign  web  design  navigation  hamburger  menu  ui  ux  interface 
february 2017 by piperh
ChromeLens
Chrome extension to analyse website with respect to accessibility and sight impairment and colour blindness
webdesign  web  design  chrome  plugin  extension  colour  blind  sight  impaired  accessibility  keyboard  tab  scroll  navigation  flow  filter  emulate  simulate  accessible 
august 2016 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
GitHub - VPenkov/okayNav: The world's okayest responsive navigation
a horizontal menu that progressively goes into a sidebar as the page narrows, so you could keep the most important links still showing on the left. Requires jQuery
webdesign  web  design  responsive  navigation  menu  collapsible  progressive  jquery  js  horizontal 
march 2016 by piperh
mblode/burger · GitHub
vanilla js slide-in, animated three-bar icon menu.
menu items slide in but panel appears via opacity (I think).
Used it on some amantaní pages, december 2018
webdesign  web  design  burger  hamburger  menu  navigation  animation  animated  js  javascript  vanilla 
january 2016 by piperh
Using Quantity Queries to write content-aware CSS - tomango
Interesting post about quantity queries in css using e.g. nth-last-child and others.
Also, the site has a menu that transitions to completely cover the page.
webdesign  web  design  css  nth-last-child  first-child  quantity  queries  menu  navigation 
october 2015 by piperh
Components · Formstone
collection of jQuery components. slider, carousel, navigation etc. They don't all work well on touch screen (or even that well on desktop). Check carefully before using.
webdesign  web  design  library  components  jquery  js  script  navigation  carousel  slider  cookie  tooltip 
october 2015 by piperh
asvd/viewport · GitHub
vanilla javascript scrolling interface. You can add custom icons to a vertical bar and it will show your position
webdesign  web  design  scroll  scrollbar  navigate  navigation  ui  interface  js 
september 2015 by piperh
Intence, the scrolling indicator
strange scrolling solution. Eliminates scrollbar and substitutes other indicators
webdesign  web  design  scroll  scrollbar  navigation  ui  interface 
september 2015 by piperh
Paradeiser
script-free navigation methos. You must display 3 to 5 menu items as normal then the rest are behind a 3-dots icon - click that and a window covers entire screen, showing the overflow menu items at top. A weird idea I reckon but might be handy one day.
webdesign  web  design  paradeiser  hamburger  alternative  navigation  responsive  css 
august 2015 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
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
WWF - Endangered Species Conservation | World Wildlife Fund
interesting nav system: no sub menus for mobile, you're taken to a category landing page and from there you can choose sub categories.
webdesign  web  design  inspiration  wildlife  navigation  responsive  menu 
august 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
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
Naver Demo
responsive menu in jquery, used by Miles C. from Formstone collection
menu  responsive  navigation  mobile  basic  webdesign  web  design  system  demo 
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
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
« earlier      
per page:    204080120160

Copy this bookmark:





to read