The slide deck I used at Respond 2014. The slides where the code is brought together originally used video to show the full experience, in this slide deck there is only a single image :( You can view the code samples prepared for this slide deck here: https://github.com/dp-lewis/respond

1. We can make people happy
with Responsive Navigation Patterns

2. People want this

3. “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
!

4. There are a lot of patterns
Some have been superseded

5. The Footer Anchor
this menu button
Jumps you to the footer

6. The Select Menu
this nav bar
turns into a select element

7. How to make people happy
3 of the top navigation patterns

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

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

10. Do (Almost) Nothing
Pros
Easy to implement
No fancy CSS voodoo
No JavaScript hocus pocus
!
Cons
Doesn’t suit lots of items due to space

11. Example of Do Nothing
simplebits.com

12. What we’re going to build

13. HTML

14. 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>

15. CSS

16. Small screen first
!
.navbar,
.brand {
text-align: center;
}

17. Align the navigation
.navbar,
.brand {
text-align: center;
}
!
.navbar--items li {
display: inline-block;
}

18. Scaling up for larger screens

19. Set a breakpoint for scaling up
@media screen and (min-width: 40em) {

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

21. 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%;
}
}

22. Putting it all together
!

23. The Toggle

24. 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

25. Example of the toggle
starbucks.com

26. What we’re going to build

27. HTML

28. 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>
...

29. JS

30. Determine the type of event
var click = 'click';
!
if (document.documentElement.hasOwnProperty('ontouchstart')) {
click = 'touchstart';
}

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

32. 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');
}

33. 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);
}

34. CSS

35. CSS to hide the navigation
!
.navbar {
max-height: 0;
overflow: hidden;
transition: max-height ease-in 300ms;
}

36. 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;
}

37. Scaling up to larger screens

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

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

40. 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;
}
}

41. Putting it all together
!

42. Nav Flyout

43. Nav Flyout
Pros
Lots of space
Wow factor
Popularised by Facebook
!
Cons
Performance
Device support
Hard to scale

44. Example
!
tenplay.com.au

45. What we’re going to build
!

46. HTML

47. Same as toggle

48. JS

49. Same as toggle

50. CSS

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

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

53. 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;
}

54. 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);
}

55. Scaling up to larger screens

56. Re-align things like with do nothing
!
@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%;
}

57. Ensure the menu is always visible
!
!
}
.navbar,
.brand,
.button-toggle.is-on ~ .brand,
.button-toggle.is-on ~ .content {
transform: translate3d(0, 0, 0);
}

58. Putting it all together
!

59. Dealing with larger nav

60. Extending the toggle

61. Avoid the sub navigation

62. Things to bear in mind

63. Make navigation items a
decent size

64. Make navigation items a
decent size

65. Use this

66. Use the devices
you are targeting

67. Where can people reach

68. 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

69. Thank you
@dp_lewis