40 Navigation tips, tutorials, techniques & resources
Right-Justified Navigation Menus Impede Scannability
"Users scan lists by moving their eyes rapidly down the left edge. Menu items that are right-aligned make scanning more difficult."
Two CSS vertical menu with show/hide effects
"I wrote this simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect."
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
"As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I've always liked the way the menu on MooTools worked. So in this tutorial we'll recreate that same effect ... but we'll do it in jQuery!"
Create a Cool Animated Navigation with CSS and jQuery
"Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. Today we're going to build a really cool animated navigation menu using just CSS and jQuery."
Better Content through Better Navigation
"The rise of various content management systems has allowed almost everyone to publish multi–page websites discussing everything, from the popular to the mundane. With the abundance of free themes and designs, new sites can look reasonably acceptable visually. But with a decent design, engaging writing, and valuable content, what would fuse them all into one solid product? Sound site navigation."
Designing the Digg Header: How To & Download
"The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big."
Improving Navigation In 5 Simple Steps
"Navigation is one of the most important elements of website usability. A good navigational structure can make visits much more pleasant for your users, and poor navigational structure can cause them to leave in frustration. Of course, accessibility should be the first concern for navigation so that everyone can use the site, and these 5 steps can help to make your navigation much more effective."
10 CSS Navigation Menus
"Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood."
Navigation Menus: Trends and Examples
"This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they’ve been taken."
CSS-Based Navigation Menus: Modern Solutions
"How do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around. Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling."
Create a Tabbed Box with YUI Tabs
"Tabbed boxes are all the rage these days. I think it's for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it's just kinda fun. Using the Yahoo! UI Tab View, creating a tabbed box is really pretty easy."
Clean Tab Bar Digg-like using CSS
"This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover)."
Improved Navigation Image Replacement
"So my co-worker at work today was slicing a design, and the designer said that the navigation had to be images. Being the good little accessibility people that we were, we were trying to figure out a way to use images, but have text also show up when images are disabled."
Dynamic Bread Crumbs
"For a redesign project at work, the new design called for bread crumbs. In my opinion, bread crumbs are a great thing to add to a site, and others agree. I didn’t want to have to specify anything on each page for the bread crumbs to work, so I wanted to do it all dynamically."
Newspond menu on Fireworks
"Our first post is about the Newspond menu. The colors and effects are smooth and really modern. And it was the little details in the design that called our attention and made us decide to use it as our first tutorial. We're going to use Fireworks to develop all the design, the steps are simple, but it's the adjustments and gradients that will make the difference in the final result."
Designer PHP: A Dynamic Menu with If and Else
"In this article, we’ll include one file for main navigation, but make individual menu items “live” depending on the page they appear on."
Advanced CSS Menu
"Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property."
Collecting for Design
"There are three disciplines that have been useful in my design self-education: Reading, practicing, and collecting. Let’s talk about the finer points of collecting."
Navigation Complex
"A combination of different types of navigation is the best way to go. A DHTML hierarchical navigation combined with a text navigation presents the hierarchical navigation on all pages and it gives experienced users the possibility to immediately jump to the page of their choice."
Better Living Through Taxonomies
"Large websites and intranets can benefit from improved methods of search and navigation. These include site maps, A-Z indexes, sophisticated search engines, and generally improved navigational design—and playing a potential role in all of these methods is well-planned taxonomy."
Information Architecture as an Extension of Web Design
"There are several information architecture techniques that Web designers can easily learn and apply to all of their projects. This involves looking at information architecture as an extension of Web design."
How did you get here?
"Too frequently is it assumed that visitors are knowledgeable about the company and Web site, and that they enter through the home page. False assumptions about visitor entry can plague even a well-planned, well-designed site."
Persuasive Navigation
"Persuasive navigation is navigation that persuades a user to do something. By understanding user needs and matching them up with business goals, you can persuade users to go where you want them to go, making them happy at the same time."
The Psychology of Navigation
"The navigation decision—whether or not to click—hinges on the mental image users create of the page they expect to see. Fortunately, a few tools are available to help influence the images in users’ minds: language, design, and the understanding of the expectations users bring to sites."
Eat Me, Drink Me, Push Me: In which the subtle arts of the interface are examined.
"You've gone through organizing content and designing interaction. Now you come to the last piece of the architecture pie: interface. How do you enable people to use all that brilliant structure?"
Designing Interfaces: Patterns for Effective Interaction Design
"Features real-live examples from desktop applications, web sites, web applications, mobile devices, and everything in between."
45 Photoshop Tutorials for Better Navigation
"Navigational buttons, bars and menus provide the designer with an excellent opportunity to be creative and add some style to the design. What better tool to use for this purpose than Photoshop?"
Where Am I?
"We’ve got web standards. We’ve got Ajax. We’ve got content. So why are we still messing up global navigation? Derek Powazek gets back to basics and offers a few simple guidelines for getting it right."
Keeping Navigation Current With PHP
"Turning unordered lists into elegant navigational menus has become a new favorite pastime for many web designers. A dash of PHP can add intelligence to your CSS-styled menu."
Complex Dynamic Lists: Your Order Please
"Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder."
Hybrid CSS Dropdowns
"Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it."
Drop-Down Menus, Horizontal Style
"Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks."
Dynamically Conjuring Drop-Down Navigation
"Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down."
Sliding Doors of CSS, Part II
"In Sliding Doors of CSS Part I, Douglas Bowman introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, he pushes the technique even further with rollovers, a fix for IE/Win’s CSS bugs, and lots more."
Sliding Doors of CSS
"Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!"
35 Designers x 5 Questions
"35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world."
9 Essential Principles for Good Web Design
"I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice."
Design Effective Navigation in 10 Steps
"We'll discuss the task of designing navigation -- and hopefully give you a head start in creating a navigation system that works the best for your users."
Essential Navigation Checklists for Web Design
"These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format."
Create a watercolor effect navigation menu