Flyout navigation

Imagine having a button on page clicking on which would slide navigation from side of the browser window, moving content of the page in the same direction, so that you won't lose the context.

This approach requires a little bit of Javascript.

Try changing width of your browser window to see this method in action. And use the source code of this page as your guide.

HTML

Add a link in your header with link_nav class. Name it as you like. It's Menu in this demo. Use #go_nav href value on the link and id go_nav on the menu itself if your menu has too many items.

  1. <nav class="menu_main">
  2. <a href="#go_nav" class="link_nav">Menu</a>
  3. <ul id="go_nav">
  4. <li class="active"><a href="#">About</a></li>
  5. <li><a href="#">Skins</a></li>
  6. <li><a href="#">Samples</a></li>
  7. <li><a href="#">Contacts</a></li>
  8. </ul>
  9. </nav>

CSS

You will need more CSS than scripts to make this work. And on Webkit browsers flyout happens with animation, using CSS transitions.

  1. .link_nav {
  2. display:none;
  3. }
  4. .link_nav:before {
  5. content:"» ";
  6. }
  7. @media only screen and (max-width:480px) { /* Smartphone custom styles */
  8. .js .link_nav {
  9. display:block;
  10. position:fixed;
  11. left:0px;
  12. top:5px;
  13. margin: 0 0 0 -1px;
  14. background:#fff;
  15. background:rgba(255,255,255,0.9);
  16. border:1px solid #666;
  17. border:1px solid rgba(0,0,0,0.6);
  18. border-left: 0 none;
  19. z-index: 100;
  20. -moz-transition: all 1s;
  21. -webkit-transition: all 1s;
  22. -ms-transition: all 1s;
  23. -o-transition: all 1s;
  24. transition: all 1s;
  25. }
  26. .js .menu_main > ul {
  27. position:fixed;
  28. width:65%;
  29. left:-65%;
  30. top:0;
  31. margin-left:-1px;
  32. background:#fff;
  33. background:rgba(255,255,255,0.9);
  34. border:1px solid #666;
  35. border:1px solid rgba(0,0,0,0.6);
  36. border-left:0;
  37. -moz-transition: all 1s;
  38. -webkit-transition: all 1s;
  39. -ms-transition: all 1s;
  40. -o-transition: all 1s;
  41. transition: all 1s;
  42. }
  43. .js .menu_main ul li {
  44. display:block;
  45. text-align:left;
  46. }
  47. /* Second level menu */
  48. .js .menu_main ul ul {
  49. display:block;
  50. margin-left:1.5em;
  51. position:static;
  52. }
  53. .js .header,
  54. .js .info,
  55. .js .footer {
  56. width:96%;
  57. margin-left:0%;
  58. -moz-transition: margin 1s;
  59. -webkit-transition: margin 1s;
  60. -ms-transition: margin 1s;
  61. -o-transition: margin 1s;
  62. transition: margin 1s;
  63. }
  64. /* Navigation is opened */
  65. .mobile_nav .container {
  66. overflow-x: hidden;
  67. width:100%;
  68. }
  69. .mobile_nav .header,
  70. .mobile_nav .info,
  71. .mobile_nav .footer {
  72. margin-left: 70%;
  73. }
  74. .mobile_nav .menu_main > ul {
  75. display:block;
  76. top:0;
  77. left:0%;
  78. width:65%;
  79. }
  80. .mobile_nav .link_nav {
  81. left:65%;
  82. }
  83. .mobile_nav .link_nav:before {
  84. content:"« ";
  85. }
  86. }

CSS for too long menu

In this demo there is not many links in navigation. So using fixed positioning can't hurt. But if your menu will be tall, you will need to use absolute positioning on .js .menu_main > ul, so it will be possible to scroll the page.

  1. .js .menu_main > ul {
  2. position:absolute;
  3. }

Javascript

Don't forget to include jQuery

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

And make it work

  1. $(
  2. function(){
  3. $("body").addClass("js");
  4. $(".link_nav").click(
  5. function(){
  6. $("body").toggleClass("mobile_nav");
  7. }
  8. );
  9. }
  10. )