We can make people happywith Responsive Navigation Patterns

People want this

“At first I was angry, but then sadness crept in as I realised that

I’m never going to be able to read those m***** f***ing comments”

a user of a popular US news site !

There are a lot of patterns Some have been superseded

The Footer Anchor

this menu button

Jumps you to the footer

The Select Menu

this nav bar

turns into a select element

How to make people happy 3 of the top navigation patterns

1. Do (almost) Nothing 2. The Toggle 3. The Flyout

1. Do (almost) Nothing also known at Top Nav

Pros Easy to implement

No fancy CSS voodoo No JavaScript hocus pocus

!

Cons Doesn’t suit lots of items due to space

Do (Almost) Nothing

Example of Do Nothing

simplebits.com

What we’re going to build

HTML

HTML can be very basic !

<div class="brand">Logo</div> !<nav class="navbar"> <ul class="navbar--items"> <li><a href="home.html">Home</a></li> ... </ul> </nav> !<div class="content"> <h1>Do Nothing</h1> ... </div>

CSS

Small screen first !

.navbar,

.brand { text-align: center; }

Align the navigation

.navbar,

.brand { text-align: center; } !.navbar--items li { display: inline-block; }

Scaling up for larger screens

Set a breakpoint for scaling up

@media screen and (min-width: 40em) {

Re-align the brand and navbar !

@media screen and (min-width: 40em) { .brand { float: left; width: 20%; } .navbar { float: left; width: 80%; }

Pad the navigation items !

@media screen and (min-width: 40em) { .brand { float: left; width: 20%; } .navbar { float: left; width: 80%; } .navbar--items li { padding-left: 5%; padding-right: 5%; } }

Putting it all together !

The Toggle

Pros Keeps the user in place

Doesn’t take up room when not in use Easy to scale up

!

Cons Small JavaScript dependancy

Animation quality

The Toggle

Example of the toggle

starbucks.com

What we’re going to build

HTML

HTML is almost the same !

<button class="button-toggle" data-toggle>Menu</button> !<div class="brand">Logo</div> !<nav class="navbar"> <ul class="navbar--items"> ... </ul> </nav> ...

JS

Determine the type of event

var click = 'click'; !if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; }

Select the elements with the attribute

var click = 'click'; !if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } !var toggleButtons = document.querySelectorAll('[data-toggle]');

Create a function to toggle the class

var click = 'click'; !if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } !var toggleButtons = document.querySelectorAll('[data-toggle]'); !function toggle(ev) { ev.preventDefault(); ev.target.classList.toggle('is-on'); }

Associate the elements with the function

var click = 'click'; !if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } !var toggleButtons = document.querySelectorAll('[data-toggle]'); !function toggle(ev) { ev.preventDefault(); ev.target.classList.toggle('is-on'); } !/* Put everything togther */ for (var i = 0; i < toggleButtons.length; i = i + 1) { toggleButtons[i].addEventListener(click, toggle, false); }

CSS

CSS to hide the navigation !

.navbar { max-height: 0; overflow: hidden; transition: max-height ease-in 300ms; }

CSS to show the navigation !

.navbar { max-height: 0; overflow: hidden; transition: max-height ease-in 300ms; } !.button-toggle.is-on { background: #222; } !.button-toggle.is-on ~ .navbar { max-height: 1000px; }

Scaling up to larger screens

Show the navigation !

@media screen and (min-width: 40em) { .navbar { max-height: 1000px; } !

Hide the button !

@media screen and (min-width: 40em) { .navbar { max-height: 1000px; } ! .button-toggle { display: none; }

Make the navigation display inline !

@media screen and (min-width: 40em) { .navbar { max-height: 1000px; } ! .button-toggle { display: none; } ! .navbar--items > li { display: inline-block; } }

Putting it all together !

Nav Flyout

Pros Lots of space Wow factor

Popularised by Facebook !

Cons Performance

Device support Hard to scale

Nav Flyout

Example !

tenplay.com.au

What we’re going to build !

HTML

Same as toggle

JS

Same as toggle

CSS

Stretch the navigation .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; !

Translate the navigation out the way .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); }

Set a transition on the elements we’ll move .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); } !.navbar, .content, .brand { transition: transform ease-in 300ms; }

Move the menu and content on toggle .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); } !.navbar, .content, .brand { transition: transform ease-in 300ms; } .content, .button-toggle.is-on ~ .navbar { transform: translate(0, 0); } .button-toggle.is-on ~ .brand, .button-toggle.is-on ~ .content { transform: translate(-66%, 0); }

Scaling up to larger screens

@media screen and (min-width: 40em) { .button-toggle { display: none; } .brand { float: left; width: 15%; } .navbar { position: relative; width: 85%; padding-top: 0; float: left; } .navbar--items li { display: inline-block; padding: 0 1.5%; }

Re-align things like with do nothing !

! .navbar, .brand, .button-toggle.is-on ~ .brand, .button-toggle.is-on ~ .content { transform: translate3d(0, 0, 0); } }

Ensure the menu is always visible !

Putting it all together !

Dealing with larger nav

Extending the toggle

Avoid the sub navigation

Things to bear in mind

Make navigation items a decent size

Make navigation items a decent size

Use this

Use the devices you are targeting

Where can people reach

Resources All the code used in this presentation

github.com/dp-lewis/respond !

Heaps of info about RWD bradfrost.github.io/this-is-responsive

!

Easy to reach places on devices lukew.com/ff/entry.asp?1649

!

Standardising the Icon bit.ly/standardise-icon

Thank you @dp_lewis