Results 1 to 9 of 9

Thread: Top Nav Bar III - how can i highlight active page?

  1. #1
    Join Date
    Apr 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Top Nav Bar III - how can i highlight active page?

    hi,

    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.

    vidigru

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    This script has has frequent updates. On this page/version:

    http://www.dynamicdrive.com/dynamici...men3/index.htm

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    vid

  4. #4
    Join Date
    Apr 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    vid

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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:

    custom_home.js
    custom_links.js
    custom_contact.js

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    vid

  7. #7
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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:

    Code:
    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/storage
    If 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.

    Mike

  8. #8
    Join Date
    Apr 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    vid

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •