Vertical Menu based on Foundation

[Claudia]

I have tried for days to do this but can’t figure out how.  I have my vertical menu working but I don’t know how to put the >> (or sideways triangle) on the main category when it has children.  Also, if I want my children styled different than the parent how do I do that. Here is my code. Thanks for any help!

 

Skin/element.navigation_tree

 

<li class="has-sub-cbd">

   <a class="vm-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>

 

I commented out  <!-- <li itemprop="name" class="vnb-sub-title-cbd">{$BRANCH.name}</li> --> because I don’t want the main category name showing with the children.

 

 

Skin/box.navigation

{if $CATEGORIES}

{$CATEGORIES}

{else}

<div id="vm-container">

  <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="vm-top">

          <li itemprop="name"><a class="vm-box-link-cbd" itemprop="url" href="{$ROOT_PATH}" title="{$LANG.common.home}"><svg class="icon"><use xlink:href="#icon-home"></use></svg>&nbsp;&nbsp;Home</a></li>

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

                        {$NAVIGATION_TREE} 

           </ul>

      </div>

  {/if}

[bsmither]

Looking at this....

 

[bsmither]

Did you get something working?

 

[Claudia]

Kinda, been working on it, again, all day .... still some stuff I can't figure out. For instance: where do I find the icons (>) How can I hide the children from small display. May have more questions

My new tree code:

<li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}>
    <a href="{$BRANCH.url}" title="{$BRANCH.name}" class="vm-box-link-cbd">{$BRANCH.name}  {if isset($BRANCH.children)}<svg class="icon  icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg>{/if}</a>
    {if isset($BRANCH.children)}
    <ul class="vnb-sub-cbd">
    <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li>
        {$BRANCH.children}
    </ul>
    {/if}
</li>

icon-x1  I created this

{$BRANCH.children}  How can I get it it's own styling

 

[bsmither]

For the right-angle, there is no separate icon image file, per se. What is in the code is a symbol from the "icon-sprites.svg" file, within which there are only about two dozen symbols. The <svg> tag has been given the class 'has-sub-arrow-cbd', which this CSS rule simply positions the symbol.

 

I am not sure how you are having a problem with small displays. I ask that you describe what you see on a small screen.

I see a 'hamburger' menu icon at the top, next to the shopping cart and search icons. Clicking the menu icon causes a slide out showing the top level categories. No hovering will have sub-categories appear.

 

[Claudia]

I may want to change the > to a side triangle. I got this error when I tried to open the icon-sprites.svg" file.

This page contains the following errors:

error on line 1 at column 1: Document is empty

Below is a rendering of the page up to the first error.

 

Any idea about this:  {$BRANCH.children}  How can I get it it's own styling  Do I put it in a <div> or <span>  <div class=??> {$BRANCH.children} </div>

[bsmither]

For styling children, find the current CSS rule '.vnb-sub-cbd'. Note the current background and border styles. This affects the overall list group. These stylings can be changed.

Find the current CSS rule 'a.vm-box-link-cbd'. This affects each individual list item.

Create a new CSS rule:

.vnb-sub-cbd a.vm-box-link-cbd { }

The stylings here affect only the sub list items.

The "icon-sprites.svg" file resembles an XML file. Because this file is "included" into a Smarty template (as opposed to having the browser fetch it as a page resource, like an image file), the CubeCart programmer's took the opportunity to add some Smarty comment tags -- which invalidates the strict structure of a SVG file. Therefore, do not try to view this file in a web browser.

[Claudia]

I see what you mean about the icon-sprites.svg" file.  Can a person add to this file?

.vnb-sub-cbd a.vm-box-link-cbd { } worked  but what if I wanted to style one sub differently than the others. Like cat ID 40

Promise I'll try not to ask anything else

Can I move the sub box up a little so it's in the middle of the parent instead at the bottom

[bsmither]

Yes. I am currently trying to find a SVG symbol script for a right-triangle.

Interesting. One can try to add a style attribute with the value coming from a detail of the category. Do you still use the Meta-Keywords detail on the Search Engines tab? The programmers took out the text entry field for entering keywords, but the database column is still there.

As such:

<a style="background-color:{$category.seo_meta_keywords};">

where for this category, 'seo_meta_keywords' would be green or #aacc99. (Keep all the other stuff in the code, just add a dedicated style attribute.)

[bsmither]

Find:
<ul class="vm-top">

For all the <li> that is a direct child, change to:
<li style="position:relative;">

These <li> tags may also have the attribute, class="has-sub-cbd" but I cannot find a CSS rule with that name.

Find the CSS rule .vnb-sub-cbd, and make sure it has position: absolute;
Add this to the rule:
top: 15px;

 

 

[Claudia]

{if isset($BRANCH.children)}
    <ul class="vnb-sub-cbd">
    <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li>
        {$BRANCH.children}
    </ul>
    {/if}

There is no <li> for {$BRANCH.children}

 

There is no ccs rule for has-sub-cbd . It's in the script

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

Would something like this work for individual child styling?  I know it's not right

<li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}>
    <a href="{$BRANCH.url}" title="{$BRANCH.name}"{if $VNB_CBD_BRANCH.cat_id == '40'class="pad-bottom"
{else} class="vm-box-link-cbd">{$BRANCH.name}  {if isset($BRANCH.children)}<svg class="icon  icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg>{/if}</a>
    {if isset($BRANCH.children)}
    <ul class="vnb-sub-cbd">
    <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li>
        {$BRANCH.children}
    </ul>
    {/if}
</li>

 

[bsmither]

Find this:

<li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}>

Change to:

<li {if isset($BRANCH.children)}class="has-sub-cbd"{/if} style="position: relative;">

The following will certainly affect cat_id=40. What happens when you want special styling for a dozen more?

<a href="{$BRANCH.url}"
   title="{$BRANCH.name}"
   {if $VNB_CBD_BRANCH.cat_id == '40'}
   class="pad-bottom"
   {else}
   class="vm-box-link-cbd"
   {/if}
>
{$BRANCH.name}
{if isset($BRANCH.children)}
<svg class="icon  icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg>
{/if}
</a>

 

[Claudia]

In my bottles and jars category I just wanted to put a solid border under the other soft drink bottles to separate the soda bottle from other bottles.  I doubt I'd use it again.  Do I put the > above {$BRANCH.name}

Thanks for all your help on this Brian.  I really appreciate it.

[bsmither]

The greater-than symbol is the closing angle of the first part of the <a> tag. Everything after that, up to the second half of the <a> tag, </a>, is the "friendly-text" seen as the link. It will become apparent when you collapse the multiple lines into one line, if you so choose.

 

[bsmither]

Using a programmer's text editor, open the file icon-sprites.svg.

Find:

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>

Add after:

<symbol id="icon-play" viewBox="0 0 384 512">
<path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/>
</symbol>

Save.

In the template BRANCH code:

Find:

<use xlink:href="#icon-angle-right"></use>

Replace with:

<use xlink:href="#icon-play"></use>

 

[Claudia]

You are a wonderful human being!!!!

Where did you find this?

[bsmither]

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs/solid