12

Trying to get 3 level dropdown working. In Opencart I have been using a third party repsonsive menu which works great. Demonstrated and available here http://cssmenumaker.com/menu/responsive-flat-menu

However, Opencart doesn't support 3 level categories so an addon is needed https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=19296

the 3rd levels categories are loaded but no displaying. Can anyone help get the thrid category and two systems merged and displaying over 1000px and even loading too with a + symbol?

Here is the dropdown menu in action at Plunkr 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>

3rd Dropdown not Displaying, although loaded

me9867
  • 1,519
  • 4
  • 25
  • 53

4 Answers4

4

I could not understand your question properly but from what I understood I have a created a two level dropdown using jQuery. 'div' tag is used inside the 'li' tag so the HTML has to be structured just a little more.

   $(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;
        }
        
        #cssmenu {
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 10px;
          margin-bottom: 10px;
          border-radius: none;
          background: #515151;
        }
        
        #cssmenu > ul > li {
          float: left;
        }
        
        #cssmenu > ul > li > a {
          font-size: 12px;
          font-weight: bold;
          padding: 10px 6px;
          text-decoration: none;
          letter-spacing: 1px;
          text-transform: none;
          color: #fff;
        }
        
        #first ul li a {
          background-color: white;
          font-size: 12px;
          font-weight: bold;
          padding: 10px 6px;
          text-decoration: none;
          letter-spacing: 1px;
          text-transform: none;
          color: black;
          margin-left: 20px;
        }
        
        #first ul ul li a {
          position: relative;
          left: 40px;
        }
<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>
Shalinee SIngh
  • 199
  • 8
  • Do you know how Designer Videos could drop down to the right (rather than left), so they all cascade in the right direction, I tried ```direction:ltr``` on both with no joy – me9867 Jan 23 '17 at 09:03
4

Here's my version, without changing your html and js. All of the changes are strictly within css. Most of the fix lied in getting rid of the following:

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

https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview

Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
  • This is looking good, how could I get the 3rd (designer videos) to go to the left rather than the right. Also when I try the menu on my site, the scrolling banners that have z-index' from 1 to 8. The banner that has 8 overlaps the new designer video dropdown. – me9867 Jan 20 '17 at 09:26
  • With the edits you asked for: https://plnkr.co/edit/K7AxlsC0ddoCDYecpO5g?p=preview – Serg Chernata Jan 20 '17 at 13:02
  • Do you know how Designer Videos could drop down to the right (rather than left), so they all cascade in the right direction, I tried ```direction:ltr``` on both with no joy – me9867 Jan 23 '17 at 09:03
  • Not sure I understand. – Serg Chernata Jan 23 '17 at 21:29
  • Got it now, answer ticked. Good work. - on my live site the 3rd levels were flowing to the left and not the right, I sorted it by changing to ```#cssmenu > ul > li > ul > li > div {left: 100%;}``` – me9867 Jan 24 '17 at 09:07
0

You shouldn't use a div inside the <li> element.

So it seems to work like this:

<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>

See https://plnkr.co/edit/Xc0jSmZd3Qa0koklgUBG?p=preview

Ovidiu Dolha
  • 5,335
  • 1
  • 21
  • 30
  • Thanks Ovidiu, Any way we could get this working with tweaking CSS and JQuery only?. The div part comes into play when there are 3 level deep categories so don't really want to touch the HTML - just somethign missing in the CSS and jQuery somewhere, this is how the menu comes and loads with the 3 categories. So a CSS or jquery edit would be ideal. – me9867 Jan 19 '17 at 15:34
  • @OvidiuDolha is right I believe. You can use jquery to change all `$('div.has-sub')` elements to `ul` tags using this method: http://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery before running your dropdown script. – Sam0 Jan 19 '17 at 16:16
  • Do you know how Designer Videos could drop down to the right (rather than left), so they all cascade in the right direction, I tried ```direction:ltr``` on both with no joy – me9867 Jan 23 '17 at 09:03
0

Just change in css and you get the result what you have:

/* Line no 575*/
#cssmenu > ul > li > ul > li > div {
   left: -100%;
   top: 0px;
}
/* Line no 171*/
#cssmenu ul ul ul {
    top: 0;
    left: 0;
}

Check the link: https://plnkr.co/edit/qqqYbmwftggcggzvgjAQ?p=preview

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
  • Do you know how Desinger Videos could drop down to the right (rather than left), so they all cascade in the right direction, I tried ```direction:ltr``` on both with no joy – me9867 Jan 23 '17 at 08:51