Trouble with Displaying 3rd Level JQuery Dropdown Menu

Question

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

javascript jquery html css opencart

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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

Answer 8

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

Trouble with Displaying 3rd Level JQuery Dropdown Menu

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Converting Venn diagram code from JavaScript <script> tags to Angular 2: A step-by-step guide

Utilize Javascript to refine JSON data strings

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

Transferring an array between jQuery and PHP and vice versa

Differences between jQuery and Google Closure in terms of handling AJAX

The Laravel return view function seems to be malfunctioning as it is displaying an error page instead

Instructions for appending an id to the URL of events in fullcalendar using Rails

The resizing function on the droppable element is malfunctioning on Mozilla browsers

Distinct vertical menus with varying widths but sharing the same CSS code for the submenus

AngularJS - the element of surprise in execution sequence

How to Improve Performance for 15,000 Socket.io Users

Instructions for duplicating the current website address into another browser window or document without user input

What are the steps to prevent a redirect?

Tips for rearranging a span following an image?

Encountering a Next.js Strapi error. TypeError: Fetch request unsuccessful

Utilizing jquery-confirm for Efficiently Redirecting Links in a Web Browser

Creating a list of identical elements with shared attribute values using nightwatch.js or JavaScript - a step-by-step guide

The task "default" is not found within your current gulpfile configuration

unable to include Cross-Origin header in ajax request

Issue with jQuery click event not firing on multiple buttons with identical names