Responsive designs are fad today, and not surprisingly. In the Internet age where usability is the biggest metric of a website’s quality, responsiveness is something that can’t be compromised upon. And slick navigational menus are pursued with an even keener desire.
Now, designers and developers are channelizing the best and the most state-of-the-art resources to inject this responsiveness in websites they are building and jQuery happens to be at the center of it all.
That said, using jQuery can become an unwieldy exercise at times. Not everyone is well versed with it and thus it leads to number of confusions. So, such folks are always looking for alternatives and the good news for them is, there are a plenty of alternatives.
We will put forth a tutorial to show how you can create a responsive navigation menu without having to deal with jQuery. One thing worth knowing is that Viewport is an absolute must when building responsive design – with or without jQuery. And we are going to include it in our code as well.
Working on the HTML
We first chart out the page structure where the HTML5 doctype is declared. The nested unordered list is included right within the body tags. Here is the complete HTML:
Note: To scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.
Writing the CSS
Fisrt of all, the CSS implements some root-level styling on the ul and li elements. For making sure that the menu is displayed horizontally, we use inline-block and float:left attributes.
We now add more attributes that are primarily meant to enhance the visual appeal. Here is the code that you can play around with in order to style the menu on your own terms:
We will also add some styling to the dropdown links and note that you cannot view the first class representing the dropdown by default.
So far, We have a navigation menu that is perfect for desktops. But since we are talking about responsiveness, we also need to take into account tablets and mobile devices. This is where the media tags come into play. Using a media query, we can set a maximum width and then make certain code alterations accordingly.
Of course, here you can have different ranges of screen sizes that you can tailor the code. I am only checking for for < =760px screen width to keep things simple.
Saving Some Space on Mobile Devices
Let’s give mobile users an option wherein they have a button to display the complete menu so that the default setting saves them some space. The default would be a collapsed menu. We we add the HTML.
If you look at the code carefully, you will note the input’s id is using the for attribute of the label, which goes on to establish the relation.
Now we will add the CSS outside the media query:
And ADD this code within the media query:
Above, the code below the /*Hide checkbox*/ makes sure that the menu is hidden by default until the user clicks on the button.
Your Turn to Talk
This tutorial is the most practical way to create responsive designs with jQuery and definitely an easy-to-follow sequence of steps.
What’s your opinion about this tutorial? I know that there is room for improvement. If you have anything to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.
View the RESPONSIVE MENU DEMO.