recentpopularlog in

abberdab : navigation   37

Dropdown Breadcrumbs
Dropdown Breadcrumbs

A breadcrumb solution that exposes the last item for small screens and reveals the rest of the items in the trail when clicked. The entire trail is exposed when space becomes available.

Saves space by only exposing the last element in the breadcrumb trail.
Small screen users are still able to traverse the breadcrumb trail

Accordion-like control doesn't necessarily map nicely to breadcrumb interaction
JS dependancy - not necessarily a con, but worth keeping in mind that the Javascript dependency means more testing and consideration
navigation  patterns  breadcrumb  responsive 
june 2018 by abberdab
Progressively-Enhanced Breadcrumb Navigation
A progressively-enhanced breadcrumb navigation pattern that allows for sibling pages to be easily accessible at every level via dropdown menus.

1. Baseline
We start with a traditional breadcrumb navigation as our baseline experience to ensure the component works for all users.

2. Sub-Menu Toggle
If Javascript is enabled, we then make the top level link a toggle which reveals the nested sub-menu when clicked or tapped.

3. :hover Support
If :hover is truly supported, then we allow for sub-menus to be revealed on mouseover and we remove the toggle functionality on the top-level link.
navigation  breadcrumb  progressive-enhancement 
june 2018 by abberdab
Breadcrumbs Navigation
Slick li’l drop down navigation for breadcrumbs. No js required!
navigation  examples  breadcrumb  css-only 
october 2017 by abberdab
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
a11y  accessibility  components  component-libraries  ui  ux  navigation 
october 2017 by abberdab
Breadcrumbs For Web Sites: What, When and How — UX Planet
Breadcrumbs serve as an effective visual aid, indicating the location of the user within the site’s hierarchy. This property makes breadcrumb navigation a great source of contextual information for users.
navigation  ux  breadcrumbs 
august 2016 by abberdab
Circular SVG Menu
So you've picked your menu style and downloaded an all-new SVG menu. What then? Here is everything you need to know to customize your menu and embed it in your page. Dissecting The Code The code
navigation  svg 
july 2016 by abberdab
Use Cases For CSS Vertical Media Queries
Two weeks ago, Sara Soueidan tweeted about the love of CSS Vertical Media Queries, I’ve remembered that I used them in some projects and so I decided to write an article about them.

We all love media queries, don’t we? Without them our layouts won’t be responsive. Media queries that check for min-width and max-width are well-known and used a lot. In this article we will explore different use cases for using vertical media queries in CSS. So we will focus on min-height and max-height.
css  design  mediaqueries  vertical  navigation  landscape  rwd 
july 2016 by abberdab
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
Not long ago, I became interested in how we can replace the hamburger menu and wrote a post that was relatively well received. One of the alternatives that I researched and really liked is known as a progressively collapsing navigation.

If you're confused as to what a progressively collapsing navigation is, I previously summarised it as a navigation that utilises space, prioritises visible items and keeps the optimal ‘desktop’ view for as long as possible. But read that other post for more info.

All of the current applications of this type of navigation rely on JavaScript and like many other front-end developers, I am obsessed with cutting out JavaScript wherever possible. In this guide, I will show you how to create a progressively collapsing navigation with just HTML and CSS.
navigation  flexbox  css  collapsing  rwd 
july 2016 by abberdab
WordPress › Subpages in Context « WordPress Plugins
A common web design pattern is to have a primary navigation with the top level pages, and then a separate navigation element on each page that shows only those pages related to a common top-most page. This widget helps to build those secondary navigation elements.
wordpress  plugins  widget  navigation  cms  design  www 
october 2012 by abberdab
jQuery Cycle Custom Navigation - Stack Overflow
Super handy. This person figured out how to create a navigation/pager group with custom text.
jquery  cycle  navigation  custom  plugins 
january 2012 by abberdab
Coda Slider Effect | jQuery for Designers - Tutorials and screencasts
Content slider effect, degrades to simple internal anchored text.
slider  coda  effect  jquery  css  navigation  animation  dev  www 
may 2009 by abberdab

Copy this bookmark:

to read