Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Menu highlighting for the current page
#1
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. Smile
Reply
#2
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
Reply
#3
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....
Do you want a Navigation link to be highlighted when the user is on that page...

#link:active
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?
Reply
#4
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#search
so the "Search" page would be active.

Please let me know if this does not make sense, and I'll try to make it more easier.

Thanks.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Menu crashes on website from Macs Naflod 0 618 03-23-2012, 12:35 PM
Last Post: Naflod
  A menu like yours Rik Telner 11 2,678 12-11-2011, 08:33 PM
Last Post: Hex
  Problem with labroccas tabbed menu plugin HostMyPicture 17 2,255 08-14-2011, 12:39 AM
Last Post: FISH
  Spoiler-Like Navigation Menu Canoris 0 664 02-22-2010, 06:02 PM
Last Post: Canoris
  [Dreamweaver] Drop-down Menu geeK 1 970 12-21-2009, 08:22 AM
Last Post: Floydy

Forum Jump:


Users browsing this thread: 1 Guest(s)