JavaScript Horizontal Menu with Submenu on Click

JavaScript Horizontal Menu with Submenu on Click
Code Snippet:CodePen Challenge - August 2019 [week 2]
Author: Nerdy Girl
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 547
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code snippet helps you to create a horizontal menu with submenu on the click event. When clicked, it shows related submenus. The code toggles the visibility of submenu items when their respective menu items are clicked. It’s useful for organizing and displaying content categories on a website.

You can use this code on websites needing a clean, clickable menu. It’s great for organizing content and providing a seamless user experience.

How to Create Horizontal Menu with Submenu on Click

1. First of all, load the Google Fonts and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>

2. Create a menu structure with list items (<li>) for main menu items and their respective submenus.

<nav class="navigationWrapper">
  <div class="logoWrapper">
    <span class="stylish">Stylish</span>
    <span class="logo">Logo</span>
  </div>
  <ul class="navigation">
    <li class="parent"><a class="link" href="#">Home</a></li>
    <li class="parent"><a class="link" href="#">About</a></li>
    <li class="parent" id="clients">
      <a class="link" href="#"><i class="fas fa-minus"></i> Clients <i class="fas fa-plus"></i></a>
      <ul class="subnavigation">
        <li><a class="link" href="#">Burger King</a></li>
        <li><a class="link" href="#">Southwest Airlines</a></li>
        <li><a class="link" href="#">Levi Strauss</a></li>
      </ul>
    </li>
    <li class="parent" id="services">
      <a class="link" href="#"><i class="fas fa-minus"></i> Services <i class="fas fa-plus"></i></a>
      <ul class="subnavigation">
        <li><a class="link" href="#">Print Design</a></li>
        <li><a class="link" href="#">Web Design</a></li>
        <li><a class="link" href="#">Mobile App Development</a></li>
      </ul>
    </li>
    <li class="parent"><a class="link" href="#">Contact</a></li>
  </ul>
</nav>

<a href="https://dribbble.com/shots/5844983-Sub-Nav-Interaction-Concept" class="signature" target="_blank">Designed by Carson Monroe</a>

3. Use the following CSS or customize it to suit your website’s design. This CSS styles the menu, submenus, and their appearance.

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(45deg, #ea4f4c 0%, #6d0019 100%);
}

body .signature {
  font-style: italic;
  font-size: 12px;
  color: #212121;
  padding-top: 15px;
  transition: all 0.3s ease-in-out;
}
body .signature:hover {
  color: white;
}

.navigationWrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #222;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  color: white;
  text-transform: uppercase;
  overflow: hidden;
  width: 600px;
}
.navigationWrapper .logoWrapper {
  display: flex;
}
.navigationWrapper .logoWrapper .stylish {
  font-weight: bold;
}
.navigationWrapper .logoWrapper .logo {
  padding-left: 4px;
  color: #ea4f4c;
}
.navigationWrapper .navigation {
  display: flex;
  list-style-type: none;
}
.navigationWrapper .navigation li {
  opacity: 1;
  list-style-type: none;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.navigationWrapper .navigation .parent {
  padding: 0 10px;
  cursor: pointer;
}
.navigationWrapper .navigation .parent .link {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  color: white;
}
.navigationWrapper .navigation .parent .link:hover {
  color: #ea4f4c;
}
.navigationWrapper .navigation .parent .link .fa-minus {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: -16px;
  top: 3px;
}
.navigationWrapper .navigation .parent .link .fa-plus {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.navigationWrapper .navigation .parent .link .fas {
  color: #ea4f4c;
  margin: -2px 4px 0;
  font-size: 10px;
  transition: all 0.3s ease-in-out;
}
.navigationWrapper .navigation .subnavigation {
  display: none;
  list-style-type: none;
  width: 500px;
  position: absolute;
  top: 40%;
  left: 25%;
  margin: auto;
  transition: all 0.3s ease-in-out;
  background-color: #222;
}
.navigationWrapper .navigation .subnavigation li a {
  font-size: 17px;
  padding: 0 5px;
}

.active.parent {
  transform: translate(-40px, -25px);
}
.active.parent .link {
  font-size: 12px;
}
.active.parent .link .fa-minus {
  opacity: 1 !important;
  font-size: 8px;
}
.active.parent .link .fa-plus {
  opacity: 0 !important;
}
.active.parent .subnavigation {
  display: flex;
}

.active#clients .subnavigation {
  transform: translate(-150px, 17px);
}

.active#services .subnavigation {
  transform: translate(-290px, 17px);
}

.invisible {
  opacity: 0 !important;
  transform: translate(50px, 0);
}

4. Load the jQuery by adding the following script before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

5. Finally, add the following JavaScript code to make the menu interactive. This code uses event listeners to toggle the visibility of submenus when their respective main menu items are clicked.

var clients = document.getElementById('clients');
var services = document.getElementById('services');

clients.addEventListener('click', function() {
  $(clients).toggleClass("active");
  $(".parent:not(#clients)").toggleClass("invisible");
}, false);

services.addEventListener('click', function() {
  $(services).toggleClass("active");
  $(".parent:not(#services)").toggleClass("invisible");
}, false);

That’s all! hopefully, you have successfully created a JavaScript horizontal menu with submenu on click. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X