Changing top menu to a vertical menu

[Claudia]

I've changed the css in the foundation navigation files so it now acts as a vertical menu.  However, I can't get it to show my "children" and I don't know where to put my script. Any help is appreciated

https://www.cambargainstore.com/

 

{if $CATEGORIES}
{$CATEGORIES}
{else}
<div id="vertical-navigation-box-cbd">
  <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="vnb-top-cbd">
              <li>    <a href="/listed-only-on-ebay" title="Listed only on eBay" class="vm-ebay-txt">Listed only on eBay</a></li>
            <li>    <a href="/listed-only-on-etsy" title="Listed only on Etsy" class="vm-etsy-txt">Listed only on Etsy</a></li>

   <!--  <li class="name"></li>
     <li class="toggle-topbar left"><a href="">{$LANG.navigation.title} <svg class="icon"><use xlink:href="#icon-caret-down"></use></svg></a></li>
  </ul> -->
<!--  <section class="top-bar-section">
     <h5 class="hide">{$LANG.navigation.title}</h5> -->
    <!-- <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="left"> -->
  <!--      <li itemprop="name" class="show-for-medium-up"><a itemprop="url" href="{$ROOT_PATH}" title="{$LANG.common.home}"><svg class="icon"><use xlink:href="#icon-home"></use></svg></a></li> -->
        {$NAVIGATION_TREE}
    <!--    {if $CTRL_CERTIFICATES && !$CATALOGUE_MODE}
        <li itemprop="name"><a itemprop="url" href="{$URL.certificates}" title="{$LANG.navigation.giftcerts}">{$LANG.navigation.giftcerts}</a></li>
        {/if} -->
   <!--     {if $CTRL_SALE}
        <li itemprop="name"><a itemprop="url" href="{$URL.saleitems}" title="{$LANG.navigation.saleitems}">{$LANG.navigation.saleitems}</a></li>
        {/if} -->
     </ul>
     </div>
  {/if}

 

<li class="has-sub-cbd">
   <a class="vertical-navigation-box-link-cbd" href="{$BRANCH.url}" title="{$BRANCH.name}">{$BRANCH.name}</a>
   {if isset($BRANCH.children)}
   <ul class="vnb-sub-cbd">
      <li itemprop="name" class="vnb-sub-title-cbd">{$BRANCH.name}</li>
      {$BRANCH.children}
   </ul>
   {/if}
</li>

 

<script>
    $('.vnb-sub-cbd').hide();
    $('.has-sub-cbd').hover(function(){
        $(this).children('.vnb-sub-cbd').fadeToggle(200);
    });
    </script>

 

[bsmither]

Just to clarify: the group of statements that starts with <li class="has-sub-cbd"> is located in the skin template file element.navigation_tree.php.

If so, then the code at /classes/catalogue.class.php, public function getCategoryTree() might be malfunctioning. Near line 898 is where $children is evaluated. Specifically, this statement:

if ($GLOBALS['config']->get('config', 'catalogue_expand_tree') && $children = $this->getCategoryTree($category['cat_id'], $level)) {

suggests that there is a setting in admin, Store Settings, Layout tab, "Expand category navigation tree", and that there are subcategories for the given category, for there to be children coded in the HTML.

[Claudia]

template file element.navigation_tree.php

<li class="has-sub-cbd">
   <a class="vertical-navigation-box-link-cbd" href="{$BRANCH.url}" title="{$BRANCH.name}">{$BRANCH.name}</a>
   {if isset($BRANCH.children)}
   <ul class="vnb-sub-cbd">
      <li itemprop="name" class="vnb-sub-title-cbd">{$BRANCH.name}</li>
      {$BRANCH.children}
   </ul>
   {/if}
</li>

When I say yes to expand navigation tree in store settings I get this over top my menu:

I have it setup with my own files to do what I want, but I wanted to set it up thru Cubecart.  Now every time I add a category, or child, I have to do it manually. I add such a varity of items I'm always adding or changing categories.

More Info:  The categories to the left in the image above are what shows using Cubecart with the expand categories store setting at no. I'm not using my files at all.

[bsmither]

The image above suggests that the javascript that initially hides the child <ul> flyout isn't getting executed. Where is this javascript located?

There may be a problem where the browser renders the entire list structure, but only then will the javascript be executed to hide all of the <ul class=".vnb-sub-cbd"> tags.

 

[Claudia]

This is the script I use for my files.  One of the questions I have is where do I put it in the CubeCart files?

<script>
    $('.vnb-sub-cbd').hide();
    $('.has-sub-cbd').hover(function(){
        $(this).children('.vnb-sub-cbd').fadeToggle(200);
    });
    </script>

[bsmither]

Try this. Place the four lines of jacascript (do not include the <script> tags) in the skin's file 2.cubecart.js (if your skin has that file).

Find near lines 2-3:

var validation_ini = {};
jQuery(document).ready(function() {

Add after:

    $('.vnb-sub-cbd').hide();
    $('.has-sub-cbd').hover(function(){
        $(this).children('.vnb-sub-cbd').fadeToggle(200);
    });

 

[Claudia]

That seems to have done it!  Thank you, again, Brian

[bsmither]

Your site is taking a crazy-long amount of time to get to my browser. Please verify your observation about this.

 

[Claudia]

I noticed that too.  I was going to put a ticket in with Ian but got sidetracked.  I'll do that now.