What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering?

function myResponsive() {
var x = document.getElementById("myMenu");
if (x.className === "menu-hori") {
x.className += " responsive";
} else {
x.className = "menu-hori";
}
}
.menu-hori{
width: 1100px;
margin: auto;
height: auto;
margin-top: 15px;
padding: 0px;
display: table;
z-index: 100;
background: grey;
}

.menu-hori ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-hori ul ul {
    opacity: 0;
position: absolute;
top: 160%;
visibility: hidden;
transition: all .4s ease;
-webkit-transition: all .4s ease;
}

.menu-hori ul ul ul {
top: 0%;
left: 160%;
}

.menu-hori ul ul li:hover > ul {
    top: 0%;
    left: 100%;
    opacity: 1;
    visibility: visible;
}

.menu-hori ul li:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.menu-hori ul li {
    float: left;
    position: relative;
}


.menu-hori ul ul li { float: none; }

.menu-hori ul li {
background-color: grey;
cursor: pointer;
}

.menu-hori ul a {
text-decoration: none;
display: block;
color: white;
padding: 10px 15px;
width: auto;
min-width: 100px;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}

.menu-hori ul li:hover { background-color: #069CDE; }

.menu-hori ul li a:hover { background-color: #069CDE; }

.menu-hori span.dropBottom,span.dropRight {
  display: block;
  box-shadow: inset 2px 0px 0px #069CDE;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
}

.menu-hori span.dropBottom {
  box-shadow: inset 0px 2px 0px #069CDE;
  position: absolute;
  width: 100%;
  bottom: 0px;
} 

.menu-hori a:hover {
  background-color: #ddd;
  color: black;
}

.menu-hori .icon {
  display: none;
}

@media screen and (max-width: 1100px) {
  .menu-hori{
width: 100%;
min-height: 40px;
height: auto;
margin-top: 15px;
padding: 0px;
display: table;
z-index: 100;
background: grey;
display: block;
  }
}

@media screen and (max-width: 1100px) {
.menu-hori ul li{
float: none;
}

.menu-hori ul li a{
display: none;
}

.menu-hori ul li a.icon{
display: block;
text-align: right;
}

.responsive ul li a{
display: block;
}
}
<div class="menu-hori" id="myMenu">
  <ul>
  <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myResponsive()">☰</a></li>
     <li><a>BEVEILIGINGSCAMERA</a><span class="dropBottom"></span>
     <ul>
       <li><a href="#" class="dropRight">Analoog</a>          
         <ul>
           <li><a href="#">irc10</a></li>    
           <li><a href="#">ird29</a></li>    
           <li><a href="#">ird1</a></li>  
         </ul>
       </li>
   </ul>
     </li>
</div>

I have provided the code snippet for better context. It seems like a lot now, but I need to refine my JavaScript so that clicking on list items will also expand the sub items instead of just hovering over them as it currently does.

javascripthtmlcssmenu

Answer №1

Here is a demonstration of a simple two-step menu using jQuery.

 $('#cssmenu li.active').addClass('open').children('ul').show();
    $('#cssmenu li.has-sub>a').on('click', function(){
      $(this).removeAttr('href');
      var element = $(this).parent('li');
      if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp(200);
      } else {
        element.addClass('open');
        element.children('ul').slideDown(200);
        element.siblings('li').children('ul').slideUp(200);
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp(200);
      }
    });

HTML:

<div id="cssmenu">
<ul>
   <li><a href="#">Home</a></li>
   <li class="active has-sub open"><a href="#">Products</a>
      <ul>
         <li class="has-sub"><a href="#">Product 1</a>
            <ul>
               <li><a href="#">Sub Product</a></li>
               <li><a href="#">Sub Product</a></li>
            </ul>
         </li>
         <li class="has-sub"><a href="#">Product 2</a>
            <ul>
               <li><a href="#">Sub Product</a></li>
               <li><a href="#">Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>
</div>

Check out the code demo on CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Menu with hover functionality in JQuery that functions as a standard menu even when JavaScript is disabled in the browser

Is it possible to modify this code so that the hover point links' images do not appear if the browser has JavaScript disabled? And can the links function like a regular hover point even when JavaScript is disabled? <script type="text/javascript" s ...

javascriptjquery

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

javascripthtmlangular

Obtaining the Div ID After Clicking on a Link

I'm attempting to fade out a box once the X in that box is clicked. I haven't been able to make it work even after searching on Google. I managed to get it working when clicking the div itself using $(this), but my goal is for it to work when the ...

javascriptjqueryhtmlclickfadeout

Having trouble retrieving the full HTML code with the execute_script function in Python while web scraping

Currently, I am in need of HTML code to perform web scraping using Python. The particular website I am working with is that of a real estate agency. Prior to executing the onclick event for a button that changes pages, it is crucial for me to first obtain ...

javascriptpythonseleniumweb-scraping

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

javascripthtmldom

What is the best way to transfer a file from Postman to a Node.js server using Multer?

Windows Express version 4.12.4 Multer version 1.0.1 Node version v0.10.22 I'm currently working on sending a file to my node.js server using Postman. I'm following the instructions provided in the readme here This is what I am sending wi ...

javascriptnode.jsexpresspostmanmulter

Creating a series of image files from CSS and Javascript animations using Selenium in Python

Looking to convert custom CSS3/Javascript animations into PNG files on the server side and then combine them into a single video file? I found an interesting solution using PhantomJS here. As I am not very familiar with Selenium, adapting it for use with S ...

javascriptpythonseleniumselenium-webdrivercss-animations

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

Leveraging CSS classes for enhancing the bootstrap grid system

Forgive me for the seemingly simple question, but here is my dilemma. Presented below is the current html code: <div class="col-xs-12 col-md-6 col-lg-4"> ...stuff </div> I am wondering how to achieve the following transformation: index ...

htmlcssbootstrap-4

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

I have successfully implemented a method to change CSS variables using advice found here. However, I am running into an issue where the changes do not persist. After clicking on a navigation link, the styles momentarily switch to the new values but quickly ...

javascriptjqueryhtmlcss

Updating an Image Using JavaScript

Having trouble changing an image using JavaScript. Followed instructions to use document.getElementbyId("image").src = "image2.jpg", but it's not working. Script is placed at the bottom after the image tag in the HTML. HTML code: ...

javascripthtml

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

How can we filter the input type file browse window to display only image files?

I'm trying to figure out how to filter the window popup so that it only shows image files when I click on the input type file. <input type="file" /> Any help would be greatly appreciated as I have been struggling to find a solution for this. ...

phpjqueryhtml

The variables $invalid and $valid in my AngularJS form have not been assigned any values

I came across a post on StackOverflow discussing the issue of both "myForm.$valid" and "myForm.$invalid" being undefined on an Angular form. However, my problem is slightly different. I have defined a form like this: <form name="EntityForm" role="form ...

javascriptangularjs

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Below, I have provided my code which utilizes the lazyLoading Module. Please review my code and identify any errors. Currently facing TypeError: Cannot read property 'toLowerCase' of undefined in Angular 7. Model Class: export class C_data { ...

javascriptangulartypescriptrxjsobservable

Encountered an issue while attempting to make a GET request using the fetch API

Currently, I am attempting to retrieve some data from the server using react.js and the fetch API. However, I keep encountering this error: SyntaxError: Unexpected token < in JSON at position 0. This is the code snippet I am using to fetch the data: ...

javascriptreactjs

Personalizing/Concealing Navigation Controls

Looking for a way to customize the Navigation in the Pagination Plugin; changing 'First, Prev, Page 1, Page 2, Next, Last' to 'Prev, Next, Page 1 of 2' The documentation suggests using show_first_last set to false to hide 'First/L ...

javascriptjqueryhtmlcss

What causes the inversion of height and width settings in react-webcam?

Currently utilizing react-webcam with the following configuration. <Webcam audio={false} screenshotFormat="image/jpeg" videoConstraints={{ facingMode: "environment", width: camera ...

javascriptreactjswebcam

Struggling to generate components using JQuery

I'm currently working on a form that checks the availability of a username using jQuery. Here is the initial form code: <form> <input id="checkuser" type="text" name="user" placeholder="Your username"/> </form> Below is the jQuer ...

javascriptjqueryajaxdom

Creating an array of JSX elements or HTMLElements in a React TypeScript rendering

Currently in the process of developing a custom bootstrap card wrapper that allows for dynamic rendering of elements on the front and back of the card based on requirements. Here is the initial implementation: import React, { useState, ReactElement } from ...

javascriptreactjstypescriptjsxtsx