Toggling navigation

If navigation on your site is complicated and even has submenus, it's better not to show everything on the top of the page when user with mobile device comes to your site. We can hide menu and open levels of navigation on click.

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

CSS

We will use one of the code snippets available for Simpliste HTML5 template. It's CSS dropdown menu /_xtensions/snippets/dropdown_menu.txt

  1. /* Dropdown menu */
  2. .menu_main li {
  3. position:relative;
  4. }
  5. .menu_main li ul {
  6. display:none;
  7. background:#fff;
  8. padding:10px 3px;
  9. border:1px solid #ddd;
  10. text-align:left;
  11. width:6em;
  12. -webkit-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
  13. -moz-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
  14. box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
  15. }
  16. .menu_main li ul li {
  17. display:block;
  18. margin:0;
  19. line-height:1.1;
  20. }
  21. .menu_main li ul a{
  22. display:block;
  23. padding:3px;
  24. }
  25. .menu_main li ul a:hover{
  26. background:#f1f1f1;
  27. }
  28. .menu_main li:hover ul {
  29. display:block;
  30. position:absolute;
  31. right:-1em;
  32. top:100%;
  33. }
  34. /* End dropdown menu */

Now we will add some styles specific for toggle navigation on mobile phones. You can indicate submenus by using background images instead of pseudo elements (in this demo ▼).

  1. .menu_parent ul {
  2. display:none;
  3. }
  4. .link_nav {
  5. display:none;
  6. color: #fff;
  7. background:#666;
  8. text-align:left;
  9. text-decoration:none;
  10. }
  11. .link_nav:after {
  12. content:"▼";
  13. }
  14. @media only screen and (max-width:480px) { /* Smartphone custom styles */
  15. .menu_main > ul {
  16. border-bottom:1px solid #666;
  17. background:#fff;
  18. }
  19. .menu_main li ul,
  20. .menu_main li:hover ul {
  21. display:block;
  22. position:static;
  23. background:#fff;
  24. padding:0;
  25. border:0;
  26. text-align:left;
  27. width:auto;
  28. -webkit-box-shadow:none;
  29. -moz-box-shadow:none;
  30. box-shadow:none;
  31. width:auto;
  32. }
  33. .menu_main li{
  34. display:block;
  35. text-align:left;
  36. width:auto;
  37. margin:0;
  38. padding:0;
  39. border:1px solid #666;
  40. border-bottom:0;
  41. line-height:1.2;
  42. }
  43. .menu_main li:hover{
  44. background:#f1f1f1;
  45. }
  46. .menu_main li.active:hover{
  47. background:transparent;
  48. }
  49. .menu_main li li {
  50. border:0;
  51. border-top:1px solid #666;
  52. line-height:1.2;
  53. background:#F9F9F9;
  54. }
  55. .menu_main li a,
  56. .menu_main li ul a {
  57. display:block;
  58. padding:12px;
  59. margin-right:30px;
  60. }
  61. .menu_main li ul a {
  62. padding-left:26px;
  63. }
  64. .menu_main li ul a:hover {
  65. background:transparent;
  66. }
  67. .menu_main li ul ul a {
  68. padding-left:36px;
  69. }
  70. a.link_nav {
  71. display:none;
  72. }
  73. .js a.link_nav {
  74. display:block;
  75. }
  76. .js .menu_main ul,
  77. .js .menu_main li:hover ul {
  78. display:none;
  79. }
  80. .js .menu_main ul.menu_expanded,
  81. .js .menu_main li:hover ul.menu_expanded {
  82. display:block;
  83. }
  84. .menu_parent:after {
  85. content:"▼";
  86. position:absolute;
  87. right:10px;
  88. top:0.9em;
  89. }
  90. .menu_parent_exp:after {
  91. content:"▲";
  92. }
  93. }

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 code to make the work. You can customize label on the open button, in this demo it's Menu.

  1. var menuText = "Menu";
  2. $(
  3. function(){
  4. $("body").addClass("js");
  5. $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>");
  6. $(".menu_main li:has(ul)").addClass("menu_parent");
  7. $(".link_nav").click(
  8. function(){
  9. $(".menu_main > ul").toggleClass("menu_expanded");
  10. $(this).toggleClass("menu_parent_exp");
  11. return false;
  12. }
  13. )
  14. $(".menu_parent").click(
  15. function(){
  16. $(this).find(">ul").toggleClass("menu_expanded");
  17. $(this).toggleClass("menu_parent_exp");
  18. return false;
  19. }
  20. )
  21. }
  22. )