Page 1 of 1
[SOLVED] How to Highlight currently opened page in Menu?
Posted: Fri Nov 07, 2014 8:57 pm
by 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;
}
Re: How to Highlight currently opened page in Menu?
Posted: Sun Nov 09, 2014 8:07 pm
by Dr.CSS
I would look in the page view source to see what class it has then style to that...
Re: How to Highlight currently opened page in Menu?
Posted: Sun Nov 09, 2014 8:18 pm
by 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..
Re: How to Highlight currently opened page in Menu?
Posted: Sun Nov 09, 2014 9:41 pm
by 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.
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 5:22 am
by Njit
Link: <removed>
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 9:28 am
by rotezecke
#sidebar ul.sidemenu .currentpage {
color: #FF0000;
}
this fails as there is no
ul.sidemenu in your html
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 9:50 am
by Njit
I have pasted the complete CSS overhere:
http://pastebin.com/0WpCq9vb
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 1:52 pm
by 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;
}
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 3:14 pm
by 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.
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 3:18 pm
by 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.
Re: How to Highlight currently opened page in Menu?
Posted: Mon Nov 10, 2014 6:42 pm
by Njit
Found out the problem. I was not aware that a:hover and a.hover where 2 different statements.
Happy now
Re: [SOLVED] How to Highlight currently opened page in Menu?
Posted: Tue Nov 18, 2014 5:49 am
by Dr.CSS
Your a.visited is also incorrect, unless you have a class of visited...
http://www.w3schools.com/css/css_link.asp