View Full Version : Top Nav Bar III - how can i highlight active page?

04-18-2005, 12:47 AM

i am using the top nav bar III and was wondering if there is an easy way to highlight the current page link in the menu. i am using the seperate js scripts for the page and am scratching my head on a good method to show the link as highlighted. i really like the way the nav bar works other than this.

ps - sorry if this is considered one of those complex 3rd party scripts that i shouldn't be asking about.


04-18-2005, 03:43 AM
This script has has frequent updates. On this page/version:


It appears to highlight everything, did you want different highlighting? Or perhaps you are viewing it in something other than IE6 or FF1.0.2 on a Windows platform. Those are all I have (except for NS7.2 which almost always is the same as FF) What browser/OS combo are you using?

04-18-2005, 04:16 AM
i'm viewing in firefox and ie.
what i was asking for a way to, say if you are on the home page, to have the home item in the navbar default to it's rollover color (or other color)?
just a visual way to let the user know what page they are on.

04-18-2005, 04:21 AM
sorry: firefox 1.0.3 and ie v6.0.2800 on winxp.

again the what i want is to tell the navbar that i am visiting a certain page, for example a home page. while on the home page i want to have the home link on the navbar to show it's rollover or highlighted state to give a visual clue to the user that they are on that page. i hope this makes sense.

04-18-2005, 05:37 AM
I don't see a simple way or even a complicated one to do that through the code. However, if you create separate custom.js files for each page, like:


and have the link for each page set to a stand out color in its custom.js file, that would do it. Sort of defeats the purpose of having an external file for all navigation on a site though.

04-18-2005, 08:13 AM
thanks for the advise.
though it would make updates much more difficult to manage if i do that.
i appreciate the site and your help!

04-18-2005, 01:24 PM
I don't see a simple way or even a complicated one to do that through the code.I haven't looked at the code in question, but presumably one could examine the links and the URL of the current document. Exactly how one would relate to the other depends on the site structure, but assuming there's a pattern, you could use that to determine where to highlight.

Consider this section of a hypothetical menu, and the associated links for each item:

Products http://www.example.com/products/
+-- Accessories http://www.example.com/products/accessories
+-- Monitors http://www.example.com/products/monitors
+-- Processors http://www.example.com/products/processors
+-- Storage http://www.example.com/products/storageIf the URL for the current document contained "http://www.example.com/products/", you could highlight the "Products" top-level item.

Just some food for thought.


04-18-2005, 04:01 PM
thanks mike. i'm not sure we are talking about the same issue wrt the script in question. i did have the link hilighted in a script i made, but liked the functionality (works across browsers, multi-tiered menu, fast loading, easy to maintain) of navbarIII better.

it's that in topnavIII (http://www.dynamicdrive.com/dynamic...pmen3/index.htm)
the same script (custom.js and supporting scripts (sniffer and specific scripts for different browsers)) are used for all pages. the problem is that it seems to make a single link hilight as i described is not very user friendly in the given code and i was interested in if there is a simple way to modify that code to make it happen. jscheuer1's comments about making seperate scripts for each page would work, but it takes the single point to update feature out of the script.

04-18-2005, 05:01 PM
Actually, Mike's post was to the point. The only problem is that the type of modification he proposes would have to be made in all the specific scripts for browsers. This would be tough enough if these scripts were not stripped of all comments and line breaks. Given that they are, the task is virtually impossible.