The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Navigation

Navigation Category

Pixel-perfect CSS3 Breadcrumb Navigation

See how one developer approaches making pixel-perfect CSS3 breadcrumb navigation here.

purecss Pixel perfect CSS3 Breadcrumb Navigation

 

This way of making such menus addresses the most common problems one might encounter in the process of building them.

It’s nothing ground-breaking, for sure, but at the very least it’s interesting to see problem solving in action.

Fast DropDown Menu Loading — jQuery-menu-aim

jQuery-menu-aim is a plugin that improves dropdown menu functionality by detecting the direction of the mouse.

monkeys Fast DropDown Menu Loading    jQuery menu aimBasically, the plugin detects mouse movement and can thus predict whether the user wants to use the sidebar or slide further down.

Here’s an in-depth analysis that shows where the inspiration for the plugin came from, how it’s implemented in Amazon, and what problems it can solve.

 

Mobile Shelves With JavaScript — Snap.js

Snap.js is a JavaScript library for creating “JavaScript shelves”.snapjs Mobile Shelves With JavaScript    Snap.js

Here’s an animated demonstration that explains the purpose of the library better.

The library is standalone and highly functional as well: CSS3 powered animations; drag support; define your own easing mode; etc.

All in all, Snap.js is an elegant navigation model for full-screen web apps such as games (perhaps) and websites (more likely).

Flexible & Device Agnostic Navigation — FlexNav

FlexNav is a mobile-first approach to creating site menus.flexnav Flexible & Device Agnostic Navigation    FlexNavFlexNav supports touch screens and adapts to smaller screen sizes without a second thought.

FlexNav supports modern browsers and IE versions from 7 and up. Besides touch events it supports keyboard tab navigation and hover reveal for desktop. It even works with JavaScript disabled.

Toggled Navigation For Smaller Screens — Responsive Nav

Responsive Nav is a standalone JS library for creating a toggled navigation for smaller screens.responsive nav Toggled Navigation For Smaller Screens    Responsive Nav

Responsive Nav weighs a mere 1.7 kilobytes and supports touch events. It has cross-browser support and supports dinosaur-browsers (IE6 included).

What’s more, this neat plugin works with disabled JavaScript, and even on screen readers.

Create Introductions & Guides for Websites Easily — Intro.js

Intro.js is a JavaScript library for creating instructions and step-by-step guides for websites.

introjs Create Introductions & Guides for Websites Easily    Intro.jsIntro.js weighs a mere 6 kilobytes together with the styling. It has keyboard navigation and an easy to use API.

Browser compatibility seems scarce at the moment, but it’s on the way — so says the developer.