+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: Menu highlighting for the current page (/showthread.php?tid=3434)
Menu highlighting for the current page - rockclimber66 - 12-09-2009
I currently use this for highlighting the current page http://www.hicksdesign.co.uk/journal/hig...e-with-css but it doesn't work in IE. I just want the active page I'm in to be highlighted in the menu, like in the MyBB website for example (http://www.mybboard.net)
Any easier cross-browsing solution?
Thanks in advance.
RE: Menu highlighting for the current page - Gaijin - 12-09-2009
Maybe posting a code you use, I don't really understand you....
Do you want a Navigation link to be highlighted when the user is on that page...
#link:active
RE: Menu highlighting for the current page - rockclimber66 - 12-09-2009
Have you seen the link I've posted, the method I'm currently using is there explained. But yeah that's what I want.
So I just need to make the menu id, and the #menu:active id will be the CSS for the menu of the page I am in?
I know where I failed. I tried doing #menu a:active, now I see lol. Then I found that link which is working except for IE.
(12-09-2009, 07:42 AM)Master of The Universe Wrote: Maybe posting a code you use, I don't really understand you....Actually this didn't work. It only works when I click it. When I click it, it has its own properties but then it disappears when I'm not clicking it anymore. Click = works, unlick = doesnt work. So perhaps there's something else I can use.. anyone?
Do you want a Navigation link to be highlighted when the user is on that page...
#link:active
RE: Menu highlighting for the current page - Dutchcoffee - 12-15-2009
On my forum, I used the following code:
Code:
<style type="text/css">
li#home {
background:#FFFFFF:
padding:3px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
}
li#home a {
color:#333333;
}
</style>To make that work, you'll need to put that in the header of each page you want it to work in. For example, if you have "Calendar" in your nav bar, you'll need to put that style code in the header of your calendar template.
Just make sure you edit the navigation bar to something like this for it work:
Code:
<div class="menu">
<ul>
<li id="home">Home</li>
<li id="search">Search</li>
<li id="members">Members</li>
<li id="calendar">Calendar</li>
</ul>
</div>So in the "Search" template header, you'd change the style code to
Code:
li#searchPlease let me know if this does not make sense, and I'll try to make it more easier.
Thanks.