Claudia Posted September 27, 2022 Share Posted September 27, 2022 How can I convert the top menu bar to a vertical left sidebar menu where the subcats open down and are closed when parent is clicked? Thanks for any and all help. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 27, 2022 Share Posted September 27, 2022 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? Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 27, 2022 Share Posted September 27, 2022 Otherwise, we can try this: https://jqueryui.com/accordion/#collapsible Quote Link to comment Share on other sites More sharing options...
Claudia Posted September 28, 2022 Author Share Posted September 28, 2022 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"> »</span></div> <div class="vm-div"><a class="vm-link-txt" href="/beer-and-liquor">Beer and Liquor<span class="pad-left"> »</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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 28, 2022 Share Posted September 28, 2022 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. Quote Link to comment Share on other sites More sharing options...
Claudia Posted September 28, 2022 Author Share Posted September 28, 2022 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 Quote Link to comment Share on other sites More sharing options...
Claudia Posted September 29, 2022 Author Share Posted September 29, 2022 Brian, I got this to work using Dirty Butter's code. Just have to fix the styling. Thanks for your help Should say I got it to work on medium up. May fool around with small display Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 29, 2022 Share Posted September 29, 2022 Excellent! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.