Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered a major issue. The problem lies in the fact that I can only expand one level of submenus at a time. When there is a submenu within another submenu, the links become hidden, and despite my efforts, I cannot seem to make them appear onclick like the first-level submenus.

Below is the JavaScript code I am utilizing to expand the first level:

$('ul.nav-mobile > li > a').click(function() {
    var checkElement = $(this).next();

    $('ul.nav-mobile li').removeClass('active');
    $(this).closest('li').addClass('active');   

    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }

    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('ul.nav-mobile ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
        return false;
    } else {
        return true;    
    }
});

You can test this functionality live on (mobile view).

I am wondering if there exists a solution that would allow me to incorporate as many levels of submenus as desired. Alternatively, what modifications do I need to make in my JavaScript for each subsequent level?

Thank you in advance for your help!

javascriptjquerycsswordpress

Answer №1

Without any inclusion of html codes in your original question, it becomes quite challenging to provide a definitive solution. However, after reviewing the details, I believe this could be the answer:

JavaScript Solution:

$('ul.nav-mobile li > a').click(function() {
    var checkElement = $(this).next(),
        $parent      = $(this).parent('li');

    $parent.addClass('active');   

    if(checkElement.is('ul') && checkElement.is(':visible')) {
        $parent.removeClass('active');
        checkElement.slideUp('normal');
    }

    if(checkElement.is('ul') && !checkElement.is(':visible')) {
        checkElement.slideDown('normal');
    }

    if (checkElement.is('ul')) {
        return false;
    } else {
        return true;
    }
});

This particular approach may introduce another issue where all open sub-menus remain visible even after closing and reopening the entire mobile menu. To resolve this issue, you can utilize the following line of code:

$('#nav-icon0').on('click', function(){
    // Implement an if condition here to verify if this element
    // has the '.open' class or not, allowing it to work only on closure and not opening
    $('ul.nav-mobile li.active').removeClass('active');
    $('ul.nav-mobile ul:visible').slideUp();
});

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

``JsViews and AngularJS: A Comparison"

I'm exploring the possibility of creating a single page application and came across jsViews/jsRender which seems very promising as it approaches Beta. As someone new to SPA development, I'm interested in understanding how jsViews stacks up agains ...

javascriptknockout.jsangularjssingle-page-applicationjsviews

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

The HTTP request is being executed twice for some reason unknown to me

import React, {useState, useEffect} from 'react' export function UseStateExample() { // This is a named export that must be used consistently with {} when importing/exporting. const [resourceType, setResourceType] = useState(null) useEffect ...

javascriptreactjsapirestreact-hooks

Utilizing JQuery for a smooth animation effect with the slide down feature

I have a question about my top navigation bar animation. While scrolling down, it seems to be working fine but the animation comes with a fade effect. I would like to achieve a slide-down effect for the background instead. Since scrolling doesn't trig ...

javascriptjqueryhtmlcssanimation

Necessitating derived classes to implement methods without making them publicly accessible

I am currently working with the following interface: import * as Bluebird from "bluebird"; import { Article } from '../../Domain/Article/Article'; export interface ITextParsingService { parsedArticle : Article; getText(uri : string) : B ...

javascripttypescript

Having trouble importing from the public folder in CSS with Create React App?

While working on a project initialized with Create React App, in the public folder there is an assets directory containing a file named logo512.jpg. When I use this file in a component like so: <div> <img src='/assets/logo512.jpg'/& ...

javascriptcssreactjscreate-react-app

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

javascripthtmlcssasp.net-mvcvisual-studio-2017

Loop through the last modified file

I am currently working on a webpage that displays the "last-modified" date of each file it loads: Have you noticed how the dates are loaded one by one as the page makes calls to the header? If not, try hitting F5 to refresh the page. Is there a way to im ...

javascriptjqueryajax

Auto-suggest feature using Jquery for dynamically pulling suggestions from a database table

How can I implement an auto-suggest text field that can fetch usernames from my database? I intend to utilize the autocomplete plugin from Jquery UI for this purpose. My aim is to create a fast and highly secure solution. ...

phpjquerymysqldatabasejson

How can we transfer functions between files in JavaScript when creating a service library?

There's a piece of code located in my identity service that I'm working with. export function sumbitLogin(username, password) { console.log(username, password); } I want to simplify the process of accessing services in my components without ...

javascriptreactjsclassimportmodule

Encountering an issue while attempting to test geolocation functionality in the web browser

I've been working on integrating the geolocation API into my app and came across a suitable resource at the MDN website. However, when I attempted to test for the existence of the geolocation object in the browser, I encountered this error: Server Err ...

javascriptreactjsgeolocationnext.js

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Encountering the error "removeAttr is not a valid function" is causing some issues

Currently, I have integrated jquery-1.7.2.min.js into my project. An unexpected TypeError is arising: $("#TextBox1").removeattr is not a function [Break On This Error] $("#TextBox1").removeattr("disabled"); Can anyone shed some light on why this issu ...

jquery

Vue: add a CSS class to products when they are in the shopping cart

As I delve into creating a shopping cart using laravel + vue, I am encountering a major obstacle related to vue's functionality. Within my cart component, the goal is to allow users to effortlessly add or remove products by simply clicking. When a pr ...

javascriptvue.js

Learn the technique of storing a sequence of functions within a variable using jQuery

For instance, I am looking to assign a sequential process to multiple variables and utilize them in various scenarios. var disable_btn = true; var button_me = $('#contents.getsamplekit .sample-form .form #submit-btn-freeSample-me'); var button_d ...

javascriptjqueryfunctionvariableschaining

Executing a JS function within a table cell

I've been attempting to invoke a function within a table cell to dynamically create some data, but I keep encountering this error below. I'm uncertain whether I'm correctly calling defined functions and JavaScript functions inside the table ...

javascriptreactjshtml-table

Enhance your photos with dynamic resizing within the original boundaries

Is there a jQuery plugin or function that allows for photo enlargement and movement within its original limits while hovering over the main product image like it is done here? ...

jqueryphotozooming

Customize the drawer background in Vue Material

Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> ...

cssvue.jssassvue-material

Arrow functions do not function properly with Typescript decorators

I've created a typescript decorator factory that logs the total time taken to execute a function, along with the actual function execution results and parameters passed to the decorator. For example: export function performanceLog(...args: any[]) { ...

javascripttypescriptecmascript-6decoratortypescript-decorator

Develop a JavaScript function to declare variables

I am currently attempting to develop a small memory game where the time is multiplied by the number of moves made by the player. Upon completion of all pairs, a JavaScript function is executed: function finish() { stopCount(); var cnt1 = $("#cou ...

javascriptjqueryhtml