Side Menus

From Snapp CMS Developer Documentation

SnappCMS supports the use of page-specific menus. These are known as "Side Menus" because frequently they appear on the side of a page.

Uses for Side Menus include displaying lists of contents related to a specific page which may not fit into the site's primary navigation scheme, e.g. a list of category-based catalog pages on standard content pages that discuss products.

Taking the example below:

The Standard Content page "Products" could be a landing page for your online store, espousing the virtues of your product range. As a Standard Content page, it contains HTML including embedded media. The catalog is broken up into categories, and one catalog page is created for each category. To keep all the store-related pages together, the catalog category pages are created underneath the main landing page.

We want the list of available categories to be displayed on the landing page, so that users can click through to the category they are interested in. So we create a Side Menu for the page which contains all of the category pages. In the Website Manager, right click on the "Products":

Then click on the "Side Menu" field and select the "Products" page itself, which has the catalog category pages as children:

Now in your Standard Content view template file

<div class="sidemenu">
<?php
 	if ($cms->page->sidemenu > 0) {
		echo '<h4>Product Categories</h4>';
		echo $cms->loadMenu('Basic',array('menu_id'=>$cms->page->sidemenu,'class'=>'Tips','singleLevel'=>false));
	}
?>
</div>

When you reload the "Products" page in your browser, the Side Menu will be displayed as follows:

<h4>Product Categories</h4>
    <ul class="basicMenu" >
        <li class="menuItem_25  first  even ">
            <a href="/main/products/great-products" title="Great Products"  class="menuItem_25 Tips">Great Products</a>
        </li>
        <li class="menuItem_46  last  odd ">
            <a href="/main/products/better-products" title="Better Products"  class="menuItem_46 Tips">Better Products</a>
        </li>
    </ul>
</div>