Tigra Menu Product Family - Highlighting currently selected page


	\| About Us \| Services \| Download \| Order \| Support \| \|

Not logged in [ Login | Register ]

SoftComplex Forums » Tigra Menu Product Family » Highlighting currently selected page

Last active: Never

Printable Version | Subscribe | Add to Favourites

tigra

Administrator

Posts: 1866
Registered: 6/17/2002
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 Menus.

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.

Example:
in products.html

Code:

in menu_items.js:

Code:

var MENU_ITEMS = [
[wrap('about'), 'index.html', null],
[wrap('products'), 'products.html', null,
['product1', 'product1.html'],
['product2', 'product2.html'],
['product3', 'product3.html']
],
[wrap('contact'), 'contact.html']
];

function wrap(caption) {
if (caption == CURRENT_ITEM)
return '<font color="red">' + caption + '</font>';
else
return '<font color="white">' + caption + '</font>';
}

for those who likes compact code here is the alternative to above:

Code:

function wrap(caption) {
return '<font color="' + (caption == CURRENT_ITEM ? 'red' : 'white') + '">' + caption + '</font>';
}

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.

Example:
in menu_items.js (note that wrapper now takes whole item’s array as parameter):

Code:

var MENU_ITEMS = [
wrap(['about', 'index.html', null]),
wrap(['products', 'products.html', null,
['product1', 'product1.html'],
['product2', 'product2.html'],
['product3', 'product3.html']
]),
wrap(['contact', 'contact.html'])
];

function wrap (item) {
if (window.location == item[1])
item[0] = '<font color="red">' + item[0] + '</font>';
else
item[0] = '<font color="white">' + item[0] + '</font>';
return (item);
}

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:

Code:

function wrap (item) {
var path = String(window.location).split(/\//);
var file = path[path.length - 1].split(/\?/);

if (file[0] == item[1])
item[0] = '<font color="red">' + item[0] + '</font>';
else
item[0] = '<font color="white">' + item[0] + '</font>';
return (item);
}

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 1224 times