Jump to content

Vertical Left Sidebar Category Menu


Recommended Posts

If you are referring to modifying Foundation, then, as an example, you can see Dirty Butter's site (highly customized but still based on Foundation) on the WayBack Machine:

https://web.archive.org/web/20190722090647/https://dirtybutter.com/plushcatalog/

I think she used SemperFi's "Vertical Navigation Box". (No longer available, commercially.)

Or are you asking about doing this on your existing site?

Link to comment
Share on other sites

I have Semper fis plugin but it doesn't work anymore.  I'm talking about my site based on foundation.  I made my own template for it and put it in content.main

  MAIN

<div class="row {$SECTION_NAME}_wrapper marg-bottom">
           <div class="medium-3 large-3 columns show-for-medium-up marg-bottom thinmarg-top" id="sidebar_left">
           {include file='templates/content.vertical_menu_small_only.php'}
  {include file='templates/content.vertical_menu_medium_up.php'}
  </div>
               <div class="small-12 medium-9 large-9 columns" id="main_content">

TEMPLATE in Part

 <div style="background-color:#C0C0C0; border-width: 1px; border-style: solid; border-color: #C0C0C0;border-top-left-radius:3px; border-top-right-radius:3px; text-align:center">Categories</div>
 <div class="vmenu">
 <div class="vm-div"><a class="vm-ebay-txt" href="/listed-only-on-ebay">Listed only on eBay</a></div>
 <div class="vm-div"><a class="vm-etsy-txt" href="/listed-only-on-etsy">Listed only on Etsy</a></div>
 <div class="vm-div"><a class="vm-link-txt" href="/ashtrays">Ashtrays </a><span class="pad-left"> &#187;</span></div>
 <div class="vm-div"><a class="vm-link-txt" href="/beer-and-liquor">Beer and Liquor<span class="pad-left"> &#187;</span></div>

 <div class="vm-div"><a class="vm-txt" href="/books">Books</a></div>

 

https://jqueryui.com/accordion/#collapsible

That looks like what I want, but how do I set it up to work with Foundation. Do I make at template with everything in it?  Or where do I put the script?  I have tried this on and off for years and could never get it to work.  Are there any other files I need to upload, and if so where do I put them.  I won't be using the category names per CubeCart per s, I'll code it all aout manually.  I'll use the correct URL just might change the category wording

Looking closer that jqueryui isn't exactly what I want.

I don't need paragraphs - just lists with no bullets I guess something like this

<li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>

See this - I don't know how to get it to work with cubecart though.

Foundation Vertical Menu

Link to comment
Share on other sites

The Foundation Vertical Menu mentioned is for Foundation 6 -- not compatible with Foundation 5 that CubeCart uses.

The JqueryUI example is intended to show the action - not the styling nor the content.

I will play with it and figure out how to integrate it.

Link to comment
Share on other sites

Looking closer that jqueryui isn't exactly what I want.

I don't need paragraphs - just lists with no bullets I guess something like this

<li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>

See this - I don't know how to get it to work with cubecart though.

Foundation Vertical Menu

Thanks for helping me with this Brian

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...