Any Templates have collapsing side menus?

Questions and answers about ShopSite Custom Templates

Any Templates have collapsing side menus?

Postby jefferis » Thu Jan 14, 2016 12:50 pm

This is just plain weird... Are there any shopsite templates that have good working side menus that are like tree menus (the submenus are hidden until you click on them)? Here's the problem: http://southernclassicjewelry.pairsite.com/store/necklaces.html

The submenus look stupid in the default, instead of hidden on the left menu. They work fine on top menu, BUT the problem is I cannot have that many items on the top menu bar.
In responsive setting, the menus go responsive on a smart phone, but they drop to the bottom of the page for the side menu, which isn't going to work well with a large inventory situation. Too much scrolling.
jefferis
 
Posts: 23
Joined: Fri Jan 08, 2016 1:13 pm

Re: Any Templates have collapsing side menus?

Postby ShopSite Lauren » Thu Jan 14, 2016 2:20 pm

No built in templates have flyout menus on the side or footer navigation. Flyout menus are only setup for the top navigation.

CSS Only for Hover Flyouts
You could modify the template CSS to display the left navigation sub menus as flyouts, but they would be hover flyouts, so they wouldn't work well on tablets and mobile where you can't really 'hover'. Here is an example of some CSS you could add to your page (such as in the header field so it is on all pages).
Code: Select all
<style type="text/css">
aside#bb-leftnav, aside#bb-rightnav {overflow: visible;}
div.left_pagelinks, div.right_pagelinks {position: relative; height: 26px; max-height: 26px;}
a.left_pagetitle, a.right_pagetitle, a.footer_pagetitle, #bb-leftnav #bb-gcl a {line-height: 20px;}
a.left_pagelink, a.right_pagelink {display: none; position: relative; top: -27px; left: 99%; line-height: 20px; background: #EFEFEF; padding: 3px 10px; z-index: 1000; opacity: 1; filter: opacity(100);}
div.left_pagelinks:hover a.left_pagetitle, div.right_pagelinks:hover a.right_pagetitle {background: #EFEFEF !important;}
div.left_pagelinks:hover a.left_pagelink, div.right_pagelinks:hover a.right_pagelink {display: block;}
</style>


CSS & JavaScript for Hover and Clickable Flyouts
If you wanted actual flyouts that are hoverable on desktop and clickable on tablets and mobile, you would need to modify the left navigation menu with both custom javascript and custom CSS.
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT

Re: Any Templates have collapsing side menus?

Postby jefferis » Thu Jan 14, 2016 2:25 pm

Thanks... but even the top level menu in Composer, for example, when you go to mobile turns into a mobile menu, but loses submenus (2nd and third levels)...

Kind of a crap set of templates if you ask me. Same issues I ran into with Business Catalyst.

Think we are going to try a different cart system...
jefferis
 
Posts: 23
Joined: Fri Jan 08, 2016 1:13 pm


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 9 guests