A look at what we’re creating
Before we begin, let’s take a look at what we’re creating today. We’ll be creating a responsive navigation similar, well… identical, to the one used here (on September 10, 2014). In case it happens to change, here’s a rough mock-up I created in Photoshop of it.
It’s designed to be lightweight, have no dependencies, no extra HTML, and fit well with a wide variety of different web designs. In it’s entirety it weighs about 3.5k.
Preliminary and setup
Let’s start by creating our directory and all the files we’ll be using. It should resemble this:
Responsive-Navigation (Folder) - index.html - style.css - nojs.css - scripts.js
Open index.html and paste the basic html5 template shown below. The only thing that might look foreign to you is the second stylesheet linked between
If you’re not familiar with the html
We’ll also start with a basic CSS reset, so paste the code below in your style.css file. I tend not to use massive resets that cover absolutely everything. Instead, I add tags to the reset as they are needed/used in my HTML. The second part just sets the font family, font-weight, font size, and line height.
Now that we have all the preliminary work done, let’s get started creating our responsive navigation.
Writing the HTML
There’s really no need to break the HTML into separate sections. Let’s jump right in and take a look at the markup we’ll be using.
All pretty standard stuff. I added the ID on
Since we’ll be styling our JS-enabled version first, let’s start by appending our menu button. Here’s the HTML we want to inject.
Simple enough, right? Let’s create a variable for this code in our scripts.js file.
Now we’re going to inject the button between our header and navigation list. To do this, we’ll need to use the function shown below. Add it to your scripts document.
As you can see the function takes two parameters. The reference node (our h1 heading), and the New Node (what we want to inject). Before we run the function, we’ll need to create a variable of our H1 tag. We can do this in one line.
Now that we have all the necessary parameters stored in variables, let’s run our menu through the function to inject it.
Now open up your index.html page in the browser. You should see our menu button in place. Awesome, now let’s style this thing.
Mobile CSS Styling
Remember, part of responsive web design is consistency on different DPI monitors, so we’ll be using EM measurements for all our sizing. We’re also styling from small to large. By doing this, mobile devices will have a lighter page load and faster experience.
There we go, the mobile part of our responsive navigation should be looking pretty good at this point. Notice that the header tag contains the blue background. To make our background gradient work we apply
no-repeat. Also, we want the navigation list to be hidden by default, this is why we applied display:none to the
Adding the toggle functionality
Now that we have our mobile navigation all styled up, let’s get the toggle functionality going. We will do this by adding/removing a class every time a user clicks our menu button. To start let’s add the class we’ll be toggling to our CSS.
Now switch back to your JS file. We already have a variable for our menu button, but we’ll need one for our navigation list too. Let’s add that now.
Now paste the following toggle class function in your code. I didn’t write it, It was found here.
We’ll now add a click event listener to our menu button. When a user clicks the button we’ll have it run our toggle class function.
Refresh your browser and try it out, all should be working!
Larger CSS Styling
Now that we have the mobile version of our responsive navigation working, it’s time to manipulate the navigation list to work well on larger screens. To start, create a CSS3 media query.
min-width: 47em seems about right. Inside paste the CSS to hide the menu button and display our navigation.
Once a users resolution hits 47em+ the menu button will be hidden and the navigation list will be displayed. Now let’s add the styles to make our navigation list work on larger screens. We do this by overwriting a lot of properties and adding new ones. Here’s the code.
There we go, now we have a full responsive navigation with a hide/show toggle menu button for smaller resolution devices. Refresh your browser and try everything out.