Menu: active page clickable

[volcanoboy]

hi,

I asked this question a few years ago here: http://forum.cmsmadesimple.org/index.ph ... l#msg42902

And I never quite figured out how to do this. On most my sites I'll have a simple horiz menu using simple_navigation.tpl. And a vert menu using the same tpl. Say something like this:

Home  •  Products  •  Contact
–––––––––––––––––––––––––––––––
Submenu 1
    subsubmenu 1
    subsubmenu 2
    subsubmenu 3
Submenu 2
Submenu 3


Let's say I go to Products/Submenu 1 I still want Products to be clickable. If I choose subsubmenu 1 I still want Products and Submenu 1 to be clickable. I think I've tried just about everything and atm the closest I get is to make it work for the main horiz menu by changing the tpl file and the css. Like this:

Code: Select all

{* 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}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="currentpage"><a href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->haschildren == true}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Code: Select all

/********************
MENU
*********************/

/* hack for Internet Explorer */
* html div#menu_horiz {
   /* hide ie/mac \*/
   height: 1%;
   /* end hide */
}

/* 
background-color for the entire menu row, 
covering 100% of the width and text center-aligned 
*/
div#menu_horiz { background-color: #d0d9e5;  /* background color for the entire menu row */
   text-align: center; width: 100%; margin: 0; border-top: 4px solid #467092; }

/* 
the menu ul box has top and left border, 
right border is provided by the li elements 
*/
div#menu_horiz ul { margin: 0; padding: 0; height:2.2em; }


/* menu list items */
div#menu_horiz li { width: 184px; float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ; }


/* the links, that is each list item */
div#menu_horiz a { padding: 0.6em 1em 0.6em 1.4em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #18507c; background-color: transparent; border-left: 1px solid #b5c5d7; display: block; /* IE has problems with this, fixed above */
}


/* hover state for links */
div#menu_horiz li a:hover {
   background-color: #b5c5d7;
}
div#menu_horiz a.activeparent:hover {
   background-color: #C3D4DF;
   color: #18507C;
}

/* active parent, that is the first-level parent of a child page that is the current page */
div#menu_horiz li.activeparent a { color: #fff; background-color: #467092; }

div#menu_horiz h3 { padding: 0.6em 1em 0.6em 1.4em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #fff; display: block; /* IE has problems with this, fixed above */
   font-size: 1em; background-color: #467092;                           /* instead of the normal font size for <h3> */
}
div#menu_horiz li.currentpage a { color: #fff; font-size: 1em; text-decoration: none; background-color: #467092; display: block; margin: 0; padding: 0.6em 1em 0.6em 1.4em; }

What I want is a way to make all menuitems clickable no matter where you are in the navigation and still be able to style them individually. See the screenie to see what I mean.

Any help would be greatly appreciated as this is a recurring problem for me and I'd like to know the "correct" way to do it.

[RonnyK]

Isnt it working when you just make the current page a link?

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
url}">{$node->menutext}

{elseif $node->haschildren == true}
url}">{$node->menutext}

{elseif $node->current == true}
url}">{$node->menutext}

Ronny

[volcanoboy]

yeah it makes them clickable. But keeping the h3 tags looks like it gives them 2 styles from the css. I'm a bit uncertain on the css to go with this if i do it like this. If i remove the h3 tags in the tpl they end up with no styling when they page is active.

[volcanoboy]

since both Subpage and Subsubpage is "currentpage" when active. How can i style these individually?

[volcanoboy]

Update. Changing the tpl file to this one I used on an older site seem to do the trick for me. Is there any reason I should not use this tpl with the latest version of CMSMS?

Code: Select all

{* 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}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li class="currentpage"><h3><dfn>Current page is {$node->hierarchy}: </dfn>{$node->menutext}</h3>

{elseif $node->parent == true}
<li class="activeparent"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->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}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}