[SOLVED] How to Highlight currently opened page in Menu?

[Njit]

I have simple cmsms website with a menu. I would like to show in some way what page i'm currently reading (make it bold or different color).

Is there a simple way to sync the menu to the selected page?

Edit: i've done some reading myself. I found out the my menu template generates a menu with 2 classes:

Code: Select all

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

I tried to use the currentpage class in my css but i did not see anything happen (cleared my website cache)

Code: Select all

/* Sidebar */	
#sidebar {
	float: left;
/*	width: 26.5%; */
	width: 30%;
	padding: 0; margin-left: 2px;	
}	
#sidebar h1 {
	margin-top: 10px;
	padding: 5px 0 5px 10px; 
	font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
	color: #555;
	background: #EEF0F1 url([[root_url]]//uploads/Refresh/headerbg.gif) repeat-x left bottom;	
	border: 1px solid #EFF0F1;
}
#sidebar .left-box {
	border: 4px solid #EFF0F1; 
	margin: 0 0 5px 0;	
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 3px 0 8px 0; padding: 0;
	text-decoration: none;		
}
#sidebar ul.sidemenu li {
	border-bottom: 1px solid #EFF0F1;
	background: url([[root_url]]//uploads/Refresh/go.gif) no-repeat 5px 5px;	
	padding: 2px 0 2px 5px;
	margin: 0 2px;	
}
#sidebar ul.sidemenu a {
	font-weight: bolder;
	text-decoration: none;	
	background-image: none;	
}

#sidebar ul.sidemenu .currentpage {
	color: #FF0000;
}

[Dr.CSS]

I would look in the page view source to see what class it has then style to that...

[Njit]

Looked at the page-source and I have it set to currentpage.

Code: Select all

<li><a href="certainpage.html" class="currentpage"> Certaintitle</a>

That class is also in the CSS. But i see no difference..

[paulbaker]

You could probably fix this yourself with Firefox and the Web Developer plug in, which will show you exactly what CSS is acting upon the element you hover over.

Or post a link.

I don't think anyone will be able to help with the info posted so far; not enough is known.

[Njit]

Link: <removed>

[rotezecke]

#sidebar ul.sidemenu .currentpage {
color: #FF0000;
}

this fails as there is no ul.sidemenu in your html

[Njit]

I have pasted the complete CSS overhere: http://pastebin.com/0WpCq9vb

[Njit]

Found out that i had to change the order in which the CSS occured.
I have the highlight in the menu now

I only lost the mouse-over in the process

Code: Select all

a, a.visited {
	text-decoration: none;
	color: #4F82CB; 
	background: inherit;
}

a.hover {
	color: #000;
	background: inherit;
}

a.currentpage {
	text-decoration: none;
	font-weight: Bold; 
	color: #601407; 
	background: inherit;
}

[rotezecke]

Code: Select all

#sidebar ul.sidebar a.currentpage {
	color: yellow;
}

same thing, ul.sidebar does not exist. the ul you are trying to address only has a clearfix class.

[Njit]

I know. I changed my menu to use the a.active class (changed that also in the CSS). Please refer to this post when making comments.

[Njit]

Found out the problem. I was not aware that a:hover and a.hover where 2 different statements.

Happy now

[Dr.CSS]

Your a.visited is also incorrect, unless you have a class of visited...

http://www.w3schools.com/css/css_link.asp