Most of the built in ShopSite themes have the store navigation on the left using the LOOP LINKS tags. The new store navigation menu feature creates a second navigation menu which goes horizontal along the top. Drop-down menus can be provided to simplify site navigation, helping customers find what they are looking for faster.
The navigation feature can be configured under Preferences > Navigation. The tags for the navigation feature can be included in all template types. Here are the tags needed to use this feature:
The tags above will add the JavaScript required for the navigation feature. The basic CSS for the navigation feature can be found below. You can take this CSS, add it to your CSS file for the website.
<style type="text/css">
/*Credits: Dynamic Drive CSS Library URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu ul {margin: 0px; padding: 0px; list-style-type: none;}
.suckertreemenu ul li {position: relative; display: inline; float: left; background-color: #CCCCCC;}
.suckertreemenu ul li a {display: block; padding: 1px 10px; text-decoration: none; color: black;}
.suckertreemenu ul li ul {left: 0px; position: absolute; top: 1em; display: block; visibility: hidden;}
.suckertreemenu ul li ul li {display: list-item; float: none;}
.suckertreemenu ul li ul li ul {left: 199px; top: 0px;}
.suckertreemenu ul li ul li a {display: block; width: 200px; color: black; text-decoration: none; padding: 1px 5px;}
.suckertreemenu ul li a:hover {background-color: black; color: white;}
.suckertreemenu .mainfoldericon {}
.suckertreemenu .subfoldericon {}
* html p#iepara {padding-top: 1em;}
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
</style>
<!--[if lte IE 8]>
<style type="text/css">
html .suckertreemenu ul li { float: left; height: 1%;}
html .suckertreemenu ul li a { height: 1%;}
html .suckertreemenu ul li ul li { float: left;}
</style>
<![endif]-->
ShopSite Version 11 Navigation Tags
ShopSite v11 came with new additions to the global navigation feature including a left navigation, right navigation and footer navigation menu. Below are the template tags to add these navigation menus into your custom templates.
[-- IF PageLinks.Left --][-- PageLinks.Left --][-- END_IF --] [-- IF PageLinks.Right --][-- PageLinks.Right --][-- END_IF --] [-- IF PageLinks.Footer --][-- PageLinks.Footer --][-- END_IF --]
If you are creating a responsive custom template and want to use ShopSite's navigation feature, you'll want to add your own CSS and/or JavaScript to make the navigation menu responsive. Below is a basic example of how you might do this. In your own custom template, you would want to change the "750px" for both @media queries to the pixel breaking point where your navigation menu no longer fits in the horizontal layout.
Menu [-- PageMenu no_jscript --]