Creative Uses of Navigation

by Tom Kenny (@tkenny)

With the combination of javascript and CSS, navigation doesn’t have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable.

taptaptap

Tap Tap Tap smoothly slides in and out product information.

rzmota

RZMota loads content into a section at the bottom of the page.

mbdragan

MB Dragan‘s navigation expands from the top to reveal sub-menus.

redcrown

Red Crown Studio slides up and down to the relevant content.

dragoninteractive

Dragon Interactive uses javascript to fade the menu states between colours on hover.

polargold

Polar Gold has big typography as it’s navigation with content appearing below each title upon click.

branded07

branded07 uses a very simple navigation menu that has a follow effect when hovering from one section to another.

apple

Apple tend to be at the forefront when it comes to web design and their horizontal product navigation is no exception.

webleeddesign

We Bleed Design uses transparent PNGs overlaying a series of colours making the transitions between content fun and interesting.

marketinginformatico

Marketing Informatico uses an illustration of an iceberg and transitions between the sky and underwater.

sursly

Sursly is the portfolio of Tyler Fink who implements a very nice left-to-right sliding navigation.

searchinsidevideo

Search Inside Video mixes a content sliding navigation with a progress tracker display.

pikaboo

Pikaboo displays navigation content in lightboxes.

nowleavingearth

Now Leaving Earth is a CSS Zen Garden design by G. Scott Olson and scrolls from left-to-right with the rocket that flies into space staying in place and the background moving.

jasonreed

Jason Read uses an accordion effect to display content.

associatedflavors

Associated Flavors places it’s navigation in space, scrolling down to content.

tomaspojeta

Tomáš Pojeta is another site that transitions between sky and underwater with beautiful illustrations.

csstricks

CSS Tricks displays a description about the destination upon hovering over the relevant tab.

kriesi

Kriesi.at implements an accordion effect directly into the navigation which reveals an icons for each section.

tvrdek

Jiří Tvrdek displays navigation in the form of oranges in a tree with the content in the trunk and underground.

Improve your design knowledge in just a minute or two a day, for free

with...

You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.