Location: US, CO
Member Is Offline
| posted on 6/19/2004 at 09:50 PM
Highlighting currently selected page
Some want to make menu indicate section the visitor is currently on. Described approach can be used with any Tigra Menu product including Tigra Tree
First of all we need the way to highlight one particular item in the block. This can be done with the wrappers - see Setting item colors independently within single block
Now we need to make menu know which item to highlight.
Method #1 (simple, but requires a lot of distributed maintenance)
You can produce separate items file for each section of the site with corresponding menu item highlighted and link on of those files depending on what
you want to be selected.
Example: you have 3 main sections: about, products and contact. You create items_about.js, items_products and items_contact.js files - all
with the same structure, but with highlighting wrapper applied to about, products and contact items respectively.
Method #2 (a bit more complicated, but at least you?ll have only one items file to maintain)
You maintain single items file and apply wrapper to all items that may be highlighted. Wrapper compares received text (item caption) and compare to
some global variable (say CURRENT_ITEM) it they match then wrapper returns HTML for highlighted item, if they don't wrapper returns HTML for
normal item. Now in each document where you want to highlight some menu item you define that global variable before linking items file.
for those who likes compact code here is the alternative to above:
Method #3 (no distributed maintenance, but has some limitations)
This method is similar to above but instead of global variable we will use information about URL of current page.
in menu_items.js (note that wrapper now takes whole item?s array as parameter):
Note that to make URLs match you?ll have specify exact full URL of the document. Below is more advanced version of wrapper which will extract filename
from full path with parameters:
This will work fine when all files are in the same directory. If this is not your case then you?ll need to customize path extraction code. Now about
limitations: This approach is not applicable if you want to highlight ?products? when you?re on ?product2.html?. Well, it?s possible to find the way
around, but you?ll end up with some document naming convention and custom path comparison code (i.e. highlight ?products? if current document has
?/products/? somewhere in its URL).
Hopefully this gives some idea about available approaches. Attached are working samples based on Tigra Menu v2.0
Attachment: highlight_samples.zip (69.58kb)
This file has been downloaded 2316 times