Trouble with Displaying 3rd Level JQuery Dropdown Menu

Currently working on implementing a 3 level dropdown feature. I have been using a third-party responsive menu in Opencart and it's been working well. You can see a demo of it here:

Unfortunately, Opencart does not natively support 3 level categories, so I am in need of an addon. Here is the link to the addon:

The 3rd level categories are being loaded but not displayed. I need help merging the two systems to display over 1000px with a + symbol for loading as well. Can anyone assist me with this?

You can view the dropdown menu in action at Plunkr here: https://plnkr.co/edit/hZG4pbVCXQupf2kgqoKF?p=preview

<div id="cssmenu"><div id="menu-button">Menu</div>
    <ul>
        <li class="has-sub"><span class="submenu-button"></span><a href="extractor-fans">Extractor Fans</a>
            <ul style="">
                <li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
                    <div class="has-sub"><span class="submenu-button"></span>
                        <ul>
                            <li><a href="bathroom-vids">Designer Videos</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="ceiling-bathroom"> Bathroom Cabinets</a></li>
            </ul>
        </li>
    </ul>
</div>

https://i.stack.imgur.com/j3yr7.jpg

javascriptjqueryhtmlcssopencart

Answer №1

My approach involves tweaking only the css, keeping your original html and js intact. By focusing on the css adjustments, I was able to address the issues without changing other parts of the code:

#cssmenu ul ul ul {
    margin-left: 100%;
}
#cssmenu ul ul {
    left: -9999px;
}

You can see the revised version here: https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview

Answer №2

It seems like there may have been some confusion with your question, but based on my understanding, I've managed to create a two-level dropdown menu using jQuery. By nesting the 'div' tag inside the 'li' tag, we can structure the HTML a bit more neatly.


        $(document).ready(function() {
           $("#first li").children('ul').hide();
           $("#first li").hover(
             function() {
               $(this).children('ul').hide();
               $(this).children('ul').slideDown('fast');
             },
             function() {
               $('ul', this).slideUp('slow');
             });
           $("#second li").hover(
             function() {
               $(this).children('ul').hide();
               $(this).children('ul').slideDown('fast');
             },
             function() {
               $('ul', this).slideUp('slow');
             });

         });
      

        #cssmenu,
        #cssmenu ul,
        #cssmenu ul li,
        #cssmenu ul li a,
        #cssmenu #menu-button {
          line-height: 1;
          position: relative;
          display: block;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          list-style: none;
          border: 0;
        }
        
        #cssmenu:after,
        #cssmenu > ul:after {
          line-height: 0;
          display: block;
          clear: both;
          height: 0;
          content: '.';
        }
        
        #cssmenu #menu-button {
          display: none;
        }

        /* Additional CSS styles go here */
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="cssmenu">
  <div id="menu-button">Menu</div>
  <ul id="first">

    <li class="has-sub"><a href="#">Extractor Fans</a>

      <ul id="second">

        <li>
          <div>
            <a class="arrow has-2nd-sub" href="#">Bathroom Shower</a>
          </div>
          <ul id="third">

            <li class="has-3rd-sub">
              <div><a href="#">Designer Videos</a></div>
              <div class="has-sub"><span class="submenu-button"></span>
              </div>
            </li>
          </ul>

        </li>
        <li><a href="#"> Bathroom Cabinets</a>
        </li>
      </ul>
    </li>


  </ul>
</div>

Answer №3

Avoid placing a div within the <li> tag.

This is how it should be structured:

<div id="cssmenu">
  <div id="menu-button">Menu</div>
  <ul>
    <li class="has-sub"><span class="submenu-button"></span><a href="extractor-fans">Extractor Fans</a>
      <ul style="">
        <li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
            <ul class="has-sub submenu-button">
              <li><a href="bathroom-vids">Designer Videos</a></li>
            </ul>
        </li>
        <li><a href="ceiling-bathroom"> Bathroom Cabinets</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Check out this working example: https://plnkr.co/edit/Xc0jSmZd3Qa0koklgUBG?p=preview

Answer №4

To achieve the desired result, simply make a few changes in the CSS code:

/* Adjustments on line 575 */
#cssmenu > ul > li > ul > li > div {
   left: -100%;
   top: 0px;
}
/* Tweaks on line 171 */
#cssmenu ul ul ul {
    top: 0;
    left: 0;
}

View the updated version by following this link: https://plnkr.co/edit/qqqYbmwftggcggzvgjAQ?p=preview

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

JavaScript form validation issue unresolved

When I attempt to validate form fields using Javascript functions, they seem to not load or check the field upon clicking the submit button. <html> <body> <?php require_once('logic.php'); ?> <h1>New Region/Entit ...

phpjavascripthtmlformsvalidation

Utilize the `npm ls somepackage` command to adhere to version range specifications

I need to utilize npm ls to pinpoint the source of security warnings. Reference to the documentation states that: Positional arguments consist of name@version-range identifiers, which will restrict the outcomes to only the paths leading to the specified ...

javascriptnpm

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

htmlcssprintingmedia

Displaying both items upon clicking

Hey there, I'm having an issue where clicking on one article link opens both! <span class='pres'><img src='http://files.appcheck.se/icons/minecraft.png' /></span><span class='info'><a href=&apo ...

javascriptjqueryhtml

Anticipated a response in the form of an object, however, a string was delivered instead

After recently updating to v14 of discordjs, I've been encountering numerous errors, including the one below. It seems a lot has changed since my last coding session, and I'm a bit unsure about what modifications are needed to ensure this ping sl ...

javascriptnode.jsdiscorddiscord.js

What are the steps to integrate jQuery into an Angular 8 application?

I am currently working on an application that relies on SignalR for communication with a desktop application. In order to make use of SignalR, I include jQuery in my .ts file. However, after migrating from Angular 7 to Angular 8, it appears that this setup ...

javascriptnode.jsangulartypescriptangular8

Ways to ensure a form label is accessible via keyboard navigation

My HTML5 form collects user information and processes it upon submission. With the help of the jQuery Validation Plugin, input validation is performed. In case of errors, an error-message-container div is displayed at the top of the screen, listing all err ...

jqueryhtmlaccessibility

Using jQuery to insert a div class with PHP referenced

My variable stores a color name. Here is an example: <?php $myvar = blueColour; ?> I want to apply this value to the body of an html page using jQuery: <script type="text/javascript"> jQuery(body).addClass("<?php echo $myvar; ?>"); < ...

javascriptphpjqueryhtmlwordpress

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

javascriptcssreactjsreact-nativecss-animations

Creating an unordered list navigation using jQuery and JSON data

Help needed in creating a dynamic menu using ul and li tags. The menu structure will be based on JSON retrieved from the web server. How can I implement this menu with jQuery? var data = [ { "MenuId": "4fde524c-9f8e-4fc4-a7c1-aea177090299", "Par ...

jqueryjsontwitter-bootstrap-3

Find and filter the values in the range.getValues() array that correspond to the first element in apps script

In the spreadsheet provided, I have compiled a list of cities in different states of my country. This information will be utilized in a form; however, it is not feasible for users to sift through an extensive list of all cities listed. Therefore, I am look ...

javascriptarraysgoogle-apps-scriptfilter

How can you use jQuery to target a textbox based on its value that includes quotation marks?

Dealing with a JavaScript string that includes a quote mark can cause some difficulties. For example, strings like Don't click this checkbox or He said "hi" pose unique challenges when trying to find an exact match in a checkbox value. Consider the H ...

javascriptjqueryhtml

The Gatsby node encounters an error while trying to create a new page

I am currently working on creating sub-pages for a projects category in Gatsby. The parent page for each project is generating correctly, but the sub-pages are not behaving as expected. Each project has the potential to have zero or multiple sub-pages, an ...

javascriptreactjsgraphqlgatsby

Is there a way to create a header that fades out or disappears when scrolling down and reappears when scrolling up?

After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of t ...

javascriptcsshtml

Using Promise to manipulate objects and arrays returned from functions

https://i.stack.imgur.com/jvFzC.png router.get('/', function (req, res, next) { var size = req.params.size ? parseInt(req.params.size) : 20; var page = req.params.page ? req.params.page>0 ? (size&(parseInt(req.params.page)-1)) : ...

javascriptarraysexpressobjectpromise

Encountering an issue with postman where properties of undefined cannot be read

I am facing an issue while trying to create a user in my database through the signup process. When I manually enter the data in the create method, it works fine as shown below: Note: The schema components are {userName:String , number:String , email:Stri ...

javascriptnode.jsreactjsmongodbexpress

Issue with accessing property `_meta` in Chartjs and Vue.js

I'm currently in the process of developing an application using Vue.js along with Chartjs. A persistent issue I am facing involves making an http call to a service, fetching data, parsing it, and then passing it into my Chartjs component. The problem ...

javascriptvue.jschart.js

In IOS 9.0, flex items do not wrap to new lines and result in overflow

While it functions properly in other browsers, the issue arises in Safari. I require the flex items to occupy the entire width on screens smaller than 768px. Currently, they are taking up the full width of their container but remaining in a single line, wh ...

htmlcssflexboxmobile-safari

Exploring ElectronJs: The journey to sending messages from ipcMain to IpcRender and awaiting a response

I need help with sending a message to ask the renderer to parse an HTML string mainWindow.webContents.send('parse html', { resp}) The renderer processes the data and sends a reply ipc.on('parse html',function(e,p){ let b ...

javascriptelectron

In React conditional return, it is anticipated that there will be a property assignment

What is the optimal way to organize a conditional block that relies on the loggedIn status? I am encountering an issue with a Parsing error and unexpected token. Can someone help me identify what mistake I am making and suggest a more efficient approach? ...

javascriptreactjsjsx