7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

How to Create a Drop-Down Nav Menu With HTML5, CSS3, and JQuery

Scroll to top
Read Time: 5 mins

In this tutorial, we’ll see what we can achieve with HTML5 and CSS3 when it comes to a staple of current websites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example.

Using these new features, we'll build a drop-down navigation menu with clean and semantic HTML code. 

Here's what we'll be building:

Let's get started.

1. Getting Started

We’ll need a copy of the latest release of jQuery, version 3.6.0 at the time of writing.

Create a project folder somewhere on your machine and call it dropdown-web. Inside this folder, create three new folders: one called index.html for the HTML markup, one called style.css for the styling, and one called script.js for the scripting with jQuery. 

2. Create the Underlying Page

Begin by importing jQuery and Font Awesome into the HTML head tags:

 Next, we code the HTML markup for the nav menu in index.html. You can use any code editor of your choice:

Using the HTML5 <header> tag, we create a header containing two sections—the logo section and the navigation menu. The navigation menu contains a list of navigations. Each navigation group has a link, an icon from Font Awesome, and a <div> containing four sub nav links. These nav links will be displayed in the dropdown menu.

We assign class attributes to most of the tags, which will enable us to access them in our stylesheet and jQuery script later on. Finally, below the markup, we use a <script> tag to load our script from the script.js file.

3. Add CSS

Now let’s add some basic styling. Create the following stylesheet in style.css:

We began by resetting the padding and margins for all elements to 0px and setting a typeface for our HTML document.

The .navActive class will be toggled onto whichever navigation item the user hovers over. This will in turn toggle the nav link items in the dropdown below the main text.

This feature will be implemented in the following section using jQuery.

4. Add the Script

The script for toggling each navigation is very simple:

In the script, we're saying that whenever a user hovers over any element with a class of nav-1, nav-2, nav-3, or nav-4, we want to display its items inside a dropdown menu by toggling the navActive class on the element.

Recall that in our stylesheet, we hid the dropdown elements by default:

When a user hovers over any of those elements, the jQuery script will toggle this class on the said element:

As a result, the div element and all of its children will go from hidden display to flex display.

Final Thoughts

I hope this tutorial helped you understand HTML5 and CSS better. In the process of building this dropdown navigation menu, we covered some basic CSS selectors and a couple of HTML tags to help you structure and design your webpages.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.