Class specific navigation code
Posted: Wed Nov 14, 2007 5:16 pm
Not sure if this is the best place to put this
I needed the navigation template to print out the page alias so I could style each li separately. After help from a friend and the forum here is what we came up with and it works perfectly.
Here is the site I'm working on:
http://site.pbats.com
Base code taken from minimal_menu.tpl
Create a new database Menu Template layout>Menu Manager "Add Template" paste code below
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="
" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="
" times=$node->prevdepth-$node->depth}
{elseif $node->index > 0}
{/if}{if $node->current == true}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {elseif $node->parent == true && $node->depth == 1}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {elseif $node->type == 'sectionheader'}
{$node->menutext}{elseif $node->type == 'separator'}
{else}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {/if}{/foreach}{repeat string="
" times=$node->depth-1}
{/if}
The page template gets this
{cms_module module='menumanager' template='primary_navigation'}
Style Sheet code
/* --------- Primary Navigation --------- */
#primaryNavigation {
width:820px;
padding:0;
clear: both;
float: left;
background-color: #333333;
background-repeat: repeat-x;
background-position: left bottom;
position: relative;
}
#primaryNavigation ul {
list-style:none;
margin:0;
padding:0;
}
#primaryNavigation li {
float:left;
list-style:none;
margin-left:0px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#primaryNavigation a {
padding-top: 5px !important;
padding-right: 0;
padding-bottom: 5px !important;
padding-left: 0;
color: #FFFFFF;
}
#primaryNavigation a.major-league-athletic-trainers {
display:block;
text-decoration:none;
line-height:21px;
width:200px;
text-align:center;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#primaryNavigation a.education-portal {
display:block;
text-decoration:none;
line-height:21px;
width:125px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.jobs {
display:block;
text-decoration:none;
line-height:21px;
width:100px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.news-center {
display:block;
text-decoration:none;
line-height:21px;
width:113px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.store {
display:block;
text-decoration:none;
line-height:21px;
width:85px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.blogs {
display:block;
text-decoration:none;
line-height:21px;
width:90px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.forums {
display:block;
text-decoration:none;
line-height:21px;
width:101px;
text-align:center;
padding:0;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
}
#primaryNavigation a:hover {
background-color: #CC0001;
}
of course style and name to fit your scenario
Shane
I needed the navigation template to print out the page alias so I could style each li separately. After help from a friend and the forum here is what we came up with and it works perfectly.
Here is the site I'm working on:
http://site.pbats.com
Base code taken from minimal_menu.tpl
Create a new database Menu Template layout>Menu Manager "Add Template" paste code below
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="
" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="
" times=$node->prevdepth-$node->depth}
{elseif $node->index > 0}
{/if}{if $node->current == true}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {elseif $node->parent == true && $node->depth == 1}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {elseif $node->type == 'sectionheader'}
{$node->menutext}{elseif $node->type == 'separator'}
{else}
url}" class="{$node->alias}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} {/if}{/foreach}{repeat string="
" times=$node->depth-1}
{/if}
The page template gets this
{cms_module module='menumanager' template='primary_navigation'}
Style Sheet code
/* --------- Primary Navigation --------- */
#primaryNavigation {
width:820px;
padding:0;
clear: both;
float: left;
background-color: #333333;
background-repeat: repeat-x;
background-position: left bottom;
position: relative;
}
#primaryNavigation ul {
list-style:none;
margin:0;
padding:0;
}
#primaryNavigation li {
float:left;
list-style:none;
margin-left:0px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#primaryNavigation a {
padding-top: 5px !important;
padding-right: 0;
padding-bottom: 5px !important;
padding-left: 0;
color: #FFFFFF;
}
#primaryNavigation a.major-league-athletic-trainers {
display:block;
text-decoration:none;
line-height:21px;
width:200px;
text-align:center;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#primaryNavigation a.education-portal {
display:block;
text-decoration:none;
line-height:21px;
width:125px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.jobs {
display:block;
text-decoration:none;
line-height:21px;
width:100px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.news-center {
display:block;
text-decoration:none;
line-height:21px;
width:113px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.store {
display:block;
text-decoration:none;
line-height:21px;
width:85px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.blogs {
display:block;
text-decoration:none;
line-height:21px;
width:90px;
text-align:center;
margin:0 1px 0 0;
padding:0;
}
#primaryNavigation a.forums {
display:block;
text-decoration:none;
line-height:21px;
width:101px;
text-align:center;
padding:0;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
}
#primaryNavigation a:hover {
background-color: #CC0001;
}
of course style and name to fit your scenario
Shane