Make Suckertree menu responsive

Questions and answers about ShopSite Custom Templates

Make Suckertree menu responsive

Postby sagiordano » Tue Oct 11, 2016 8:11 am

Hello,

I have created custom templates for my store and I am using the built-in page menu that creates the flyout menus. I have built the rest of the site using bootstrap but I don't have control over how the menu is created so it is using suckertree. The menu does not seem to be responsive by default. I know I can add css to collapse the menu based on screen size like bootstrap does, but if the html code is auto-generated for the menu, how to I get the collapse button in there? Or is there another way that I am supposed to make suckertree responsive?

Thanks!

Steve
sagiordano
 
Posts: 14
Joined: Wed Jan 28, 2009 8:52 am

Re: Make Suckertree menu responsive

Postby ShopSite Lauren » Tue Oct 18, 2016 9:20 am

The navigation menu is setup to be responsive in all the responsive design themes built in ShopSite. If you are creating a custom template, you would need to setup your own code (or use the same code from one of our themes) to make the menu responsive. For your specific question about the toggle, you could just add the toggle button outside the navigation menu. Something similar to the following:

Code: Select all
<a href="#" id="navToggle">Menu</a>
[-- PageMenu no_jscript --]


Then you would add your own CSS and/or JavaScript to have the menu act how you want it to act. Below is some basic code for this feature:

Code: Select all
<style type="text/css">
a#navToggle {display: none;}
ul#ShopSite {display: block; padding: 0px; margin: 0px; list-style: none}
ul#ShopSite ul {display: none; padding: 0px; margin: 0px; list-style: none}
ul#ShopSite li {display: block; clear: both; list-style: none; padding: 0px; margin: 0px; position: relative}
ul#ShopSite > li {display: inline-block; clear: none}
ul#ShopSite a {display: block; padding: 0px 15px; line-height: 26px; color: inherit}
ul#ShopSite > li > a {line-height: 36px}
@media screen and (min-width: 750px) {
   ul#ShopSite > li:hover > ul {display: block; position: absolute; top: 36px; left: 0px; min-width: 200px}
   ul#ShopSite li li:hover > ul {display: block; position: absolute; top: 0px; left: 100%; min-width: 200px}
}
@media screen and (max-width: 750px) {
   a#navToggle {display: block; color: inherit}
   ul#ShopSite {display: none}
   ul#ShopSite li {display: block !important; clear: both !important; line-height: 44px !important}
   ul#ShopSite ul {display: block !important; position: relative !important; top: 0px !important; left: 0px !important}
   ul#ShopSite ul {padding-left: 20px}
   ul#ShopSite ul ul {padding-left: 40px}
   ul#ShopSite ul ul ul {padding-left: 60px}
}
</style>
<script type="text/javascript">
function toggleNav() {
    var nav = document.getElementById("ShopSite");    
    nav.style.display = (nav.style.display != 'block' ? 'block' : '' );
    return false;
}
document.getElementById("navToggle").addEventListener("click", toggleNav);
</script>
<a href="#" id="navToggle" onclick="toggleNav()">Menu</a>
[-- PageMenu no_jscript --]
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 23 guests