Global Store Navigation Menu

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:

    [-- IF PageMenu --][-- PageMenu --][-- END_IF --]

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;
          width: 90px;
          padding: 1px 8px;
          border: 1px solid black;
          border-left-width: 0;
          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: 159px;
          top: 0px;
     }
     .suckertreemenu ul li ul li a {
          display: block;
          width: 160px;
          color: black;
          text-decoration: none;
          padding: 1px 5px;
          border: 1px solid #ccc;
     }
     .suckertreemenu ul li a:hover {
          background-color: black;
          color: white;
     }
     .suckertreemenu .mainfoldericon {
          background: #CCCCCC; no-repeat center right;
     }
     .suckertreemenu .subfoldericon {
          background: #CCCCCC no-repeat center right;
     }
     * 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]-->