This content originally appeared on Envato Tuts+ Tutorials and was authored by Kingsley Ubah
In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to a staple of current web sites: 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 for the files we’ll create 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:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head>
Next, we code the HTML markup for the nav menu inside of index.html. You can use any code editor of your choice:
<body>
<header>
<div class="header-container">
<div class="logo">
<a href="">LOGO</a>
</div>
<nav>
<ul class="menu">
<!-- Nav -->
<li class="nav-1">
<a href="">Nav Link 1</a>
<i class="fas fa-arrow-down"></i>
<div class="nav-items-1">
<a href="">Sub Nav Link 1</a>
<a href="">Sub Nav Link 2</a>
<a href="">Sub Nav Link 3</a>
<a href="">Sub Nav Link 4</a>
</div>
</li>
<!-- Nav -->
<li class="nav-2">
<a href="">Nav Link 2</a>
<i class="fas fa-arrow-down"></i>
<div class="nav-items-2">
<a href="">Sub Nav Link 1</a>
<a href="">Sub Nav Link 2</a>
<a href="">Sub Nav Link 3</a>
<a href="">Sub Nav Link 4</a>
</div>
</li>
<!-- Nav -->
<li class="nav-3">
<a href="">Nav Link 3</a>
<i class="fas fa-arrow-down"></i>
<div class="nav-items-3">
<a href="">Sub Nav Link 1</a>
<a href="">Sub Nav Link 2</a>
<a href="">Sub Nav Link 3</a>
<a href="">Sub Nav Link 4</a>
</div>
</li>
<!-- Nav -->
<li class="nav-4">
<a href="">Nav Link 4</a>
<i class="fas fa-arrow-down jsicon-2"></i>
<div class="nav-items-4">
<a href="">Sub Nav Link 1</a>
<a href="">Sub Nav Link 2</a>
<a href="">Sub Nav Link 3</a>
<a href="">Sub Nav Link 4</a>
</div>
</li>
</ul>
</nav>
</div>
</header>
<script src="script.js"></script>
</body>
</html>
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, this 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 file script.js.
3. Add CSS
Now let’s add some basic styling; create the following stylesheet inside style.css:
/* reset padding and margin, set document font */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body{
width: 100%;
height: 100%;
background-color: #333;
}
/* Sets color of link texts to white */
a{
text-decoration: none;
color: #fff;
font-weight: 700;
}
li {
list-style-type: none;
}
/* Header 100 percent of body, position relative to body */
header {
width: 100%;
padding: 0 2%;
background-color: black;
position: relative;
}
/* Display logo and nav side by side to each other (flex) */
.header-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Set color for Font Awesome icons */
.fas {
color: #fff;
}
.logo a {
font-size: 40px;
}
.menu {
display: flex;
}
.menu li {
margin-left: 60px;
}
.menu li a {
padding: 20px 0;
}
/* Change color of link texts when hovered upon */
.menu li a:hover {
color: #fb743e;
}
/* Also change color of icon when hover on link */
.menu li a:hover - .fas{
color: #fb743e;
}
/* Hide all sub nav links by default, display children in column when displayed */
.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
text-align: center;
display: none;
flex-direction: column;
background-color: black;
}
.nav-items-1 a, .nav-items-2 a, .nav-items-3 a, .nav-items-4 a {
font-size: 14px;
}
.nav-items-1, .nav-items-2, .nav-items-3 {
width: 100%;
max-width: 150px;
position: absolute;
top: 64px;
padding: 10px;
}
.nav-items-4 {
width: 100%;
max-width: 130px;
position: absolute;
top: 64px;
}
/* This will be used to display sub links for a nav when active */
.navActive {
display: flex;
}
We began by resetting padding and margin 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 his mouse on, this will in turn toggle the nav link items in the dropdown below the main text.
This feature will be implemented in the following scripts section using jQuery.
4. Add the Script
The script for toggling each navigation is very simple:
// toggle first nav on hover
$('.nav-1').hover(function() {
$('.nav-items-1').toggleClass('navActive')
})
// toggle second nav on hover
$('.nav-2').hover(function() {
$('.nav-items-2').toggleClass('navActive')
})
// toggle third nav on hover
$('.nav-3').hover(function() {
$('.nav-items-3').toggleClass('navActive')
})
// toggle fourth nav on hover
$('.nav-4').hover(function() {
$('.nav-items-4').toggleClass('navActive')
})
In the script, we're saying that whenever any of elements with a class of nav-1, nav-2, nav-3, or nav-4 is hovered upon, 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:
.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
text-align: center;
display: none;
flex-direction: column;
background-color: black;
}
When any of those elements are hovered upon, the jQuery script will toggle this class on the said element:
.navActive {
display: flex;
}
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 web pages.
This content originally appeared on Envato Tuts+ Tutorials and was authored by Kingsley Ubah
Kingsley Ubah | Sciencx (2014-01-20T02:31:18+00:00) How to Create a Drop-Down Nav Menu With HTML5, CSS3 and JQuery. Retrieved from https://www.scien.cx/2014/01/20/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.