Navigation Bar Drop Down bug

[Jack Swartz]

I have a minor issue with the navigation bar. If you click on one of the navigation links more than once, (that has multiple links under it) it will create multiple dropdowns. Three times will lock up the browser. I have tried it in Chrome, Edge and Firefox. All have the same effect.
It is easier to see what I am talking about if you go to my website. http://www.bodydynamics.com
If you click on the INFORMATION link several times, it works correctly. If you click on the LITERATURE link several times, it will create multiple dropdowns and eventually lock up the browser. I am sure that it needs some CSS code for the navigation (suckertree menu).

Thanks in advance for all your help

Jack

[ShopSite Lauren]

Jack, this is a known bug and has been fixed for future versions. To fix it in your current version, go to Merchandising > Custom Templates > Includes > New Publish File, and name your new include file "Bootstrap-Footer.sst". Then paste all the code below into that publish file, and regenerate your store. Only 2 or 3 lines were changed, but you are replacing the entire original Bootstrap-Footer.sst file with the code below.

Code: Select all

[-- IF VAR.Theme "Custom" --]
#########   Enter Your Own Custom Code Starting Here  ######################
#########   You can replace the code below, everything from here down to the DO NOT CHANGE line
#########   For more information, go to http://www.shopsite.com/templates/cookbook/bootstrap-theme.html

</div><!-- end container -->

########################   DO NOT CHANGE anything below here   #######################
#
[-- ELSE --][-- INCLUDE VAR.Footer PROCESS --][-- END_IF --]
[-- IF VAR.GoogleFont --]<link href="//fonts.googleapis.com/css?family=[-- VAR.GoogleFont --]" rel="stylesheet" type="text/css">[-- END_IF --]
<script type="text/javascript">
[-- IF PageLinks.Left --]
ss_jQuery("a#sidenavtoggle").click(function(){ss_jQuery("#leftnavtoggled").slideToggle(); ss_jQuery(this).preventDefault(); return false;});
[-- ELSE_IF PageLinks.Right --]
ss_jQuery("a#sidenavtoggle").click(function(){ss_jQuery("#rightnavtoggled").slideToggle(); return false; ss_jQuery(this).preventDefault();});
[-- END_IF --]
[-- IF PageMenu --]
ss_jQuery("a#shoptoggle").click(function(){ss_jQuery("div.suckertreemenu").slideToggle(400); return false; ss_jQuery(this).preventDefault();});
ss_jQuery("ul#ShopSite > li > a").each(function(){
   if ( ss_jQuery(this).parent("li").children("ul").length > 0 ) {
      ss_jQuery(this).addClass("withflyout").append("<span class=\"caret\"></span>");
      ss_jQuery(this).parent("li").children("ul").wrap("<div class=\"flyout\"></div>");      
   }
});
ss_jQuery("a.withflyout").click(function(){
   ss_jQuery(this).addClass("dontclose");
   ss_jQuery("a.withflyout").each(function(){if(ss_jQuery(this).hasClass("dontclose")){}else{ss_jQuery(this).parent("li").children("div").slideUp(400);}});
      if (!ss_jQuery(this).hasClass("flycreated")) {
         var postsArr = new Array(), $postsList = ss_jQuery(this).parent("li").children("div").children("ul");
         var postsArrTwo = new Array(), $postsListTwo = ss_jQuery(this).parent("li").children("div").children("ul");
         $postsList.find('li').each(function(){postsArr.push($(this).html());});
         $postsListTwo.find('> li').each(function(){postsArrTwo.push($(this).html());});
         if ((postsArr.length > 10) && (postsArr.length < 20)) {
            var firstList = postsArrTwo.splice(0, Math.round(postsArrTwo.length / 2)), secondList = postsArrTwo, ListHTML = '';
            function createHTML(list){ListHTML = ''; for (var i = 0; i < list.length; i++) {ListHTML += '<li>' + list[i] + '</li>'};}
            createHTML(firstList); $postsListTwo.html(ListHTML); createHTML(secondList); $postsListTwo.after('<ul class="secondlist"></ul>').next().html(ListHTML);
         }
         else if (postsArr.length > 20) {
            var firstList = postsArrTwo.splice(0, Math.round(postsArrTwo.length / 3)), secondList = postsArrTwo.splice(0, Math.round(postsArrTwo.length / 2)), thirdList = postsArrTwo, ListHTML = '';
            function createHTML(list){ListHTML = ''; for (var i = 0; i < list.length; i++) {ListHTML += '<li>' + list[i] + '</li>'};}
            createHTML(firstList); $postsListTwo.html(ListHTML); createHTML(thirdList); $postsListTwo.after('<ul class="thirdlist"></ul>').next().html(ListHTML); createHTML(secondList); $postsListTwo.after('<ul class="secondlist"></ul>').next().html(ListHTML);
         }   
      ss_jQuery(this).addClass("flycreated");
      }
   ss_jQuery(this).removeClass("dontclose");
   ss_jQuery(this).parent("li").children("div").slideToggle(400);
   return false;
   ss_jQuery(this).preventDefault();
   
});
[-- END_IF --]
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
[-- IF VAR.Secure "no" --]
[-- IF SC_Registration --][-- INCLUDE Bootstrap-AjaxSignIn.sst PROCESS --][-- END_IF --]
[-- IF AJAX_Add_To_Cart --][-- INCLUDE Bootstrap-AjaxMini.sst PROCESS --][-- END_IF --]
[-- END_IF --]

[Jack Swartz]

Thanks Lauren. I just noticed that you had another service pack released in July to sp2r4 for FreeBSD. I am going to upgrade to the latest version. Any chance that it was fixed in this service pack?

Jack

[ShopSite David]

Unfortunately, the solution came after r4 was released.

[Jack Swartz]

Hi Lauren,
When I follow your instructions and regenerate my store I get the following error:

Publishing File:[Bootstrap-Footer.sst]
/home/bodyd/data/templates/publish/Bootstrap-Footer.sst [11]: Template Error: Include tag illegal for Publish Files

Please advise.

Thanks,

Jack

[loren_d_c]

Jack,

Bootstrap-Footer.sst should actually be an Include file, not a Publish file.

-Loren

[Jack Swartz]

Thanks!

That did the trick.

Jack