Some help is required please.
Site in progress http://pearsaa2.memset.net/~johnson - The hover state for both vertical and horizontal navigation shows as red and I want that to remain whilst that page is active. I have hunted high and low as to how to achieve this but can't find any tips.
Can anyone help please? Thanks in advance!
Getting current page to say highlighted/active
Re: Getting current page to say highlighted/active
Has to do with using JS for hover etc. instead of css and you are using a menu template that has no class for active page like the default ones have, must be minimal template...
Re: Getting current page to say highlighted/active
Ah - so by template you mean .tpl? Here is the one I am using:
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{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}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}
{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{/if}
{/foreach}
{repeat string="" times=$node->depth-1}
{/if}
{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}
{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}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}
{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{/if}
{/foreach}
{repeat string="" times=$node->depth-1}
{/if}
Re: Getting current page to say highlighted/active
Yes, notice...
{if $node->current == true}
url}"............
All kinds of things but no class='active' on li or a...
{if $node->current == true}
url}"............
All kinds of things but no class='active' on li or a...
Re: Getting current page to say highlighted/active
Okay - you need to be gentle with me now as I can get my head around html/css and even a few smarty tags but the coding in a .tpl is a new territory.
So do I need to add
{if $node->current == active}
url}"............
If so , does it matter the order in which it goes?
So do I need to add
{if $node->current == active}
url}"............
If so , does it matter the order in which it goes?
Re: Getting current page to say highlighted/active
The menu you pasted doesn't have any classes to denote active etc. so you would need to add them or just use a different menu template...
{if $node->current == active}
url}"..........
Would give both the li and the a link a class of active when it's the current page so you could use this for CSS to make it look like it does on hover, it may not work if you don't use CSS to do the hover state...
{if $node->current == active}
url}"..........
Would give both the li and the a link a class of active when it's the current page so you could use this for CSS to make it look like it does on hover, it may not work if you don't use CSS to do the hover state...
