Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Navigation Patterns - Respond 2014

1,455 views

Published on

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

Published in: Technology
  • Be the first to comment

Responsive Navigation Patterns - Respond 2014

  1. 1. We can make people happy with Responsive Navigation Patterns
  2. 2. People want this
  3. 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. 4. There are a lot of patterns Some have been superseded
  5. 5. The Footer Anchor this menu button Jumps you to the footer
  6. 6. The Select Menu this nav bar turns into a select element
  7. 7. How to make people happy 3 of the top navigation patterns
  8. 8. 1. Do (almost) Nothing 2. The Toggle 3. The Flyout
  9. 9. 1. Do (almost) Nothing also known at Top Nav
  10. 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. 11. Example of Do Nothing simplebits.com
  12. 12. What we’re going to build
  13. 13. HTML
  14. 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. 15. CSS
  16. 16. Small screen first ! .navbar, .brand { text-align: center; }
  17. 17. Align the navigation .navbar, .brand { text-align: center; } ! .navbar--items li { display: inline-block; }
  18. 18. Scaling up for larger screens
  19. 19. Set a breakpoint for scaling up @media screen and (min-width: 40em) {
  20. 20. Re-align the brand and navbar ! @media screen and (min-width: 40em) { .brand { float: left; width: 20%; } .navbar { float: left; width: 80%; }
  21. 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. 22. Putting it all together !
  23. 23. The Toggle
  24. 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. 25. Example of the toggle starbucks.com
  26. 26. What we’re going to build
  27. 27. HTML
  28. 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. 29. JS
  30. 30. Determine the type of event var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; }
  31. 31. Select the elements with the attribute var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } ! var toggleButtons = document.querySelectorAll('[data-toggle]');
  32. 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. 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. 34. CSS
  35. 35. CSS to hide the navigation ! .navbar { max-height: 0; overflow: hidden; transition: max-height ease-in 300ms; }
  36. 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. 37. Scaling up to larger screens
  38. 38. Show the navigation ! @media screen and (min-width: 40em) { .navbar { max-height: 1000px; } !
  39. 39. Hide the button ! @media screen and (min-width: 40em) { .navbar { max-height: 1000px; } ! .button-toggle { display: none; }
  40. 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. 41. Putting it all together !
  42. 42. Nav Flyout
  43. 43. Nav Flyout Pros Lots of space Wow factor Popularised by Facebook ! Cons Performance Device support Hard to scale
  44. 44. Example ! tenplay.com.au
  45. 45. What we’re going to build !
  46. 46. HTML
  47. 47. Same as toggle
  48. 48. JS
  49. 49. Same as toggle
  50. 50. CSS
  51. 51. Stretch the navigation .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; !
  52. 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. 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. 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. 55. Scaling up to larger screens
  56. 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. 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. 58. Putting it all together !
  59. 59. Dealing with larger nav
  60. 60. Extending the toggle
  61. 61. Avoid the sub navigation
  62. 62. Things to bear in mind
  63. 63. Make navigation items a 
 decent size
  64. 64. Make navigation items a decent size
  65. 65. Use this
  66. 66. Use the devices 
 you are targeting
  67. 67. Where can people reach
  68. 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. 69. Thank you @dp_lewis

×