Wordpress

Creating a Responsive Menu with HTML, CSS & jQuery

[ad_1]

Today I’m going to show you how to create a responsive menu with HTML, CSS and jQuery. I’m going to go over how to style the menu, using media queries and how to make the hamburger button toggle the menu.

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the jQuery

You might also like: Creating a Dropdown Menu with HTML & CSS


1.) Structuring The HTML

Complete HTML

HTML Explained

The elementnav is the housing of the entire menu and the class of menu will be the starting point for all CSS selectors.

An unordered list, holding all the menu links, has a class of active which is used to toggle it from visible to hidden.

The list item that is currently active, for example, the page you’re on, is highlighted through CSS by using the selector current-item.

A class of toggle-nav has been added to the anchor link between the ul and form so it can be hidden or visible depending on the window size, I cover this below using media queries. It also uses the Unicode symbol of three lines, e.g. .

A basic form with an input and button is used as an example so the content styles can change depending on the window size.


2.) Styling with CSS

Complete CSS

Standard CSS Explained

Don’t get put off if it looks like a lot of CSS. Here’s a rundown of what’s going on:

Firstly the button .toggle-nav is hidden.

The menu has styling applied but by using a media query of min-width we can specify that the styling will only apply until the window is equal to or more than 860px.

rgba(0,0,0,0.5) is used on a few items in the CSS. RGBA stands for Red, Green, Blue and Alpha. Alpha means the transparency/opacity. For example, an alpha of 0.6 would be 60% opacity but an alpha of 0.06 would be 6% opacity.

The selector :last-child is used to specify that the last list item will have no margin applied to it, otherwise as the window gets smaller the search form would go onto the next line before it’s supposed to.

The transitions in the menu, for example, the fading of colours from grey to green, use the standard transition. However, if you’re supporting older versions of browsers you may want to use prefixed code. The code is mostly the same however you prefix the transition like so:

Webkit: -webkit-transition:;
– Firefox: -moz-transition:;
– IE: -ms-transition:;
– Opera: -o-transition:; – Please note that Opera now runs on Webkit so this one is outdated but still good to know.

Responsive CSS Explained

A little like before with .menu when min-width was used we’ll now be using max-width which does the opposite. The styles within a max-width media query will only take effect once the window gets to a certain size. This is the most common type of media query.

The first breakpoint is set at 970px and shortens the input in the .search-form. This is a useful technique when you don’t want to start hiding the menu but need to make some changes so the styles don’t break.

The second breakpoint is set at 860px and houses the majority of the responsive styling. The .menu is given a position of relative so the ul can be positioned absolutely inside of it.

To hide the menu and help the jQuery the class .menu ul.active is hidden. This comes into play when you toggle the class .active with jQuery.

Adding the arrow to the top of the ul is achieved using the pseudo element :after. Don’t forget to always add content:''; to any pseudo-element or else it won’t show up.

Positioning of the arrow is achieved using absolute positioning and CSS transforms, more specifically translate. The values of 0% and -100% state 0% from the left and -100% from the top.

The toggle button and search form then just use some basic CSS styling to change things around a little.


3.) Toggling with jQuery

Complete jQuery

jQuery Explained

The jQuery starts off with a click call on the button .toggle-nav. The e stands for event. You could use any name you like but it’s standard to use either e or event.

Then you toggle the active class on that button .toggle-navand the ul in the menu. You could combine this into one line but for the sake of this tutorial, it’s best to keep them separate so you can clearly see what’s happening.

Finally, you tell jQuery to prevent the default behavior of the .toggle-nav button. Since it’s actually an anchor link it’ll put a # the address bar and jump the page to the top if we don’t remove its default behavior.


Conclusion and Further Reading

Going responsive is hard. It takes a lot of research and practice to get right. I hope this tutorial has helped your understanding of how to implement a responsive navigation menu into your projects.

If you have any questions or comments just leave them below and I’ll get back to you ASAP.

Here are a few resources that should help:

You might also like: Create a Fading Popup Modal with jQuery

[ad_2]
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close