Part 2: How to Show and Hide your Navigation using Media Queries and jQuery for your Responsive Website
The best practice for usability is to keep your navigation visible for as long as possible. Of course there comes a point in the screen downsizing where the navigation must be hidden and accessed via the hamburger button. You should resort to hiding it only when it is necessary because of screen dimensions. In this tutorial we will teach you how to show and hide your newly designed pure CSS hamburger button and navigation using Media Queries and jQuery for your responsive website.
Step 5: Create the HTML Structure for your Navigation after the Hamburger Button
Since we already created the HTML element for our navigation hamburger button we will now need to set up the basic HTML structure for the navigation element after it.
HTML
<nav id="nav" class="toggle"> Navigation UL Here </nav>Items to Note:
- Take note of the CSS class ‘toggle’ added to the navigation HTML element; it will be referenced throughout this tutorial.
- The purpose of this tutorial is only to teach you how to show and hide the elements, you will need to style and structure your actual navigation. Use the ID ‘nav’ to style your element with CSS and not the class ‘toggle’.
Step 6: Add the ‘toggle’ class and update the Hamburger Button CSS
In the next step we will reference the class ‘toggle’ used on the navigation element in Step 5 and style it with CSS. We will also need to update the ‘#nav_btn’ CSS in order to hide it until it is needed for responsive purposes.
CSS
.toggle{ display: block; } #nav_btn{ display: none; }Items to Note:
- Make sure that you are referencing the same CSS class placed on your HTML navigation element.
- Add the ‘toggle’ style before our CSS from Part 1.
- #nav_btn is updated from ‘display: block’ to ‘display: none’ in the CSS from Part 1 Step 2, it is not new CSS but a readjustment.
- When styling the navigation element ‘nav’, do not use ‘display: block’ on it as this will not enable the class ‘toggle’ to work properly with the Media Queries.
Step 7: Use Media Queries to hide the navigation element and show the navigation button when the responsive calls for it
Now that we have the navigation element showing and our navigation button hidden, it’s time to reverse this when the responsive calls for it due to screen dimensions using CSS Media Queries.
CSS
@media only screen and (max-width: 680px){ .toggle{ display: none; } #nav_btn{ display: block; } }Items to Note:
- Add this after your main CSS or in a separate stylesheet.
- The screen width at which point the CSS changes is ‘680px’, adjust this to your desired width.
- We are reversing ‘display: none’ and ‘display: block’ on the elements ‘toggle’ and ‘nav_btn’.
- Resize your screen, once you hit 680px in width, the navigation element should disappear and the navigation button should now be showing.
- Clicking the navigation button will not do anything until the next and final step is complete.
Step 8: Use jQuery to enable the navigation button to toggle the navigation element open and close
In the final step of this tutorial we will now replace the jQuery from Part 1 with the new function below; this will now enable the navigation button to toggle the navigation element open and close by using the classes ‘toggle’ and ‘active’.
jQuery
$(document).ready(function() { $('#nav_btn').click(function(e) { if($('#nav').is(':hidden') == true) { $(this).toggleClass("active"); $('#nav').removeClass("toggle"); } else { $(this).removeClass("active"); $('#nav').addClass("toggle"); } e.preventDefault(); }); });Items to Note:
- Make sure that you are referencing the same ID and class placed on your HTML elements.
- This step relies on the jQuery JavaScript library in order to function; you should already have jQuery enabled from Part 1, if not you must either link directly to jQuery or download the latest version and upload it to your server.
- Make sure you replace the jQuery from Part 1 with this updated code.
Download jQuery
You can download the latest version of jQuery below:
Full Code
HTML
<nav id="nav" class="toggle"> Navigation UL Here </nav>CSS
.toggle{ display: block; } #nav_btn{ display: none; float: right; padding: 20px; cursor: pointer; } #nav_btn span, #nav_btn span::before, #nav_btn span::after{ width: 28px; height: 4px; float: left; display: block; background: #000; position: relative; text-indent: -9000px; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } #nav_btn span{ margin: 8px 0; } #nav_btn span::before, #nav_btn span::after{ content: ''; position: absolute; } #nav_btn span::before{ top: -8px; } #nav_btn span::after{ bottom: -8px; } #nav_btn.active span{ background-color: transparent; } #nav_btn.active span::before, #nav_btn.active span::after{ top: 0; } #nav_btn.active span:before{ transform: rotate(45deg); -webkit-transform: rotate(45deg); } #nav_btn.active span::after{ transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); top: 10px; } @media only screen and (max-width: 680px){ .toggle{ display: none; } #nav_btn{ display: block; } }jQuery
$(document).ready(function() { $('#nav_btn').click(function(e) { if($('#nav').is(':hidden') == true) { $(this).toggleClass("active"); $('#nav').removeClass("toggle"); } else { $(this).removeClass("active"); $('#nav').addClass("toggle"); } e.preventDefault(); }); });
LIVE DEMO
In order to test the live demo you will need to resize your screen.
This is PART 2 of a two-part tutorial, if you missed PART 1 please click on the button below to get started:
In Part 1 of this two-part tutorial we will teach you how to create an animated hamburger button with CSS and jQuery for your responsive website.
Troubleshooting
If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.