ShopSite Forums

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.

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.

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