Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

February 12, 2022 03:24 am

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

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.

Original Link: https://code.tutsplus.com/tutorials/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery--net-12176

Share this article:

View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code