As I got some questions about how this menu can be created dynamically I post the menu template code below.
Note it reads the colors from the corresponding pages. I use the ECB module for it and this code in the page template:
Code: Select all
{content_module module="ECB" field="color_picker" block="page_bg" label="Page background color - default value = 697890" default_value="#697890" assign='page_bg'}
Sub text in tiles:
Code: Select all
{content block="menu_subtext" assign="menu_subtext" label="Sub text in tiles"}
Menu template (I removed some strip tags from the original code I had)
Code: Select all
{*
### CMSMS Menu template for Metrika template ###
# requirements:
CGSimpleSmarty
CGExtensions
ECB module (color picker, http://www.i-do-this.com/blog/Add-color-pickers-to-your-website/57)
### Menu block types ###
Type 1: Type 2:
+----------+ +---------+
| 1a | | 2a |
| | +---------+
| | +---------+
| | | 2b |
+----------+ +---------+
Type 3A: Type 3B:
+---+ +---+ +---------+
|3Aa| |3Ab| | 3Ba |
+---+ +---+ +---------+
+---------+ +---+ +---+
| 3Ac | |3Bb| |3Bc|
+---------+ +---+ +---+
Type 4:
+---+ +---+
|4a | |4b |
+---+ +---+
+---+ +---+
|4c | |4d |
+---+ +---+
Menu supports only one level! {menu number_of_levels=1}
Every ROW has MAX 3 blocks
!!! Currently only supports nodes of type 'content' and 'separator' !!!
A block can have 1,2,3 or 4 menu items.
Every block is separated by a CMSMS separator (content)
Layout of menu items is determined by number of items in block.
If 3 items in a block, menu will cycle to Type 3A,3B,3A,3B etc.
Color of menu item is determined by color picker content block in content page
*}
{if $count > 0}
<!--Navigation-->
<nav class="navi row-fluid">
{* counter for menu blocks (max 3 per row) *}
{$menuBlock=0}
{* variable to store nodes while waiting for separator *}
{$tmpnodes=null}
{* loop full menu *}
{foreach from=$nodelist item=node}
{* if not separator and not last node then store node in tmp array *}
{if $node->type == 'content' && !$node@last}
{$tmpnodes[]=$node}
{elseif ($node->type == 'separator' && $tmpnodes != null) || $node@last}
{* make sure to get last content node too UNLESS it is a separator. That should not be there anyway *}
{if $node@last && $node->type != 'separator'}{$tmpnodes[]=$node}{/if}
{* increment menu block counter *}
{$menuBlock=$menuBlock+1}
{* if menu block counter is 4, 7, 10 etc start a new row. Close old row expect for first cycle of course *}
{if $menuBlock % 3 == 1}
{if $menuBlock > 1}
</div>
</div>{/if}
<div class="container">
<div class="span12 clearfix">{/if}
{* count menu items in block *}
{$blockItemCount = count($tmpnodes)}
{* print error if > 4 *}
{if $blockItemCount > 4}MEER DAN 4 MENU ITEMS IN BLOK!{break}{/if}
{* set blockType: 1,2,3A,3B or 4 *}
{if $blockItemCount == 3}
{$blockType="3{cycle name='menu3' values='A,B'}"}
{else} {$blockType=$blockItemCount}
{/if}
{* class for whole block *}
{$menuBlockClass="menu-block-type-{$blockType}"}
<div class="span4 {$menuBlockClass}">
{* iterate menu items for current block *}
{foreach from=$tmpnodes item=tmpnode}
{* class for this menu item navi-type-x. x = 1a,2a,2b,3Aa,3Ab,3Ac,3Ba,3Bb,3Bc,4a,4b,4c or 4d *}
{$naviclass = "navi-item navi-type-{$blockType}{cycle name='menu_item_type' values='a,b,c,d'}"}
{* get color for this menu item *}
{cgsimple::get_page_content($tmpnode->alias,'page_bg','page_bg')}
{cgsimple::get_page_content($tmpnode->alias,'menu_subtext','menu_subtext')}
<a class="{$naviclass} page-transition" href="{$tmpnode->url}" title="{$tmpnode->menutext}" style="background-color : {$page_bg}"><span class="center-navi"><i>{$tmpnode->menutext}</i><span class="menu-subtext">{$menu_subtext}</span></span></a>
{/foreach}
</div>
{* reset cycle for next block iteration *}
{cycle name='menu_item_type' values='a,b,c,d' reset=true print=false advance=false}
{* empty array with block nodes *}
{$tmpnodes=null}
{/if} {* node type *}
{/foreach}
</div>
</div>
</nav>
{/if}{* count > 0 *}
Code above combined with the live website should enable one to create a similar menu. Note the template itself is not free and should be bought if used.