• content
• navigation
• access
• search

---

"You are here" extension

Version 1.2

The "You are here" extension tells you where you are in the navigation tree, using visual and link-title semantics. It works by comparing the URI in the address bar with the href of each navbar link - the closest match is deemed to be the current page, and hence its ancestors are the current branch.

The menus on this site already use this extension - if you look in the "About" menu you'll see that the route to this section is highlighted, and that the highlighted links have extra information in their title attributes.

• Installation
• Configuration
• Styling the indicated links
• Implementation notes
• Browser notes

Installation

Download the "You are here" script, copy it into your udm-resources folder, and add the script include to the body section:

• Skip code example

<!-- you are here extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-youarehere.js"></script>

Configuration

At the top of the script is a control array with five parameters:

• Skip code example

var youAreHere = [
	'index.php',                 // default page name [eg "index.php", "default.html" etc]
	'You are here: ',            // add text to here-page title ["text"|"none"]
	'You are in this branch: ',  // add text to here-branch title ["text"|"none"]
	'before',                    // where to add title text ["before"|"after"]
	'no',                        // open here-branch menus automatically ["yes"|"no"]
	];

Styling the indicated links

Here-indicated links will have their rollover styles applied by default. You vary the styling from there by addressing the links from external CSS - indicated links have the class name "udmY".

You can copy-and-paste the following examples and edit them to suit; but to understand them fully, you really need to have read the documentation about applying individual item styles. This is the same as that - defining additional styles for a specific class name applied to the default, visited and rollover states of links:

• Skip code example

/* [nav] default you are here will be same as rollover unless otherwise specified */
#udm a.udmY, #udm a.udmY:visited {
	background-color:#fff;
	}

/* [nav] re-inforce original rollover or do something else */
#udm a.udmY:hover, #udm a.udmY:focus, #udm a.udmY:visited:hover, #udm a.udmY.udmR, #udm a.udmY.udmR:visited, #udm a.udmY:active {
	background-color:#ccc;
	}

/* [menu] default you are here will be same as rollover or inherit from navbar styles unless otherwise specified */
#udm ul a.udmY, #udm ul a.udmY:visited {
	background-color:#fea;
	}

/* [menu] re-inforce original rollover or do something else */
#udm ul a.udmY:hover, #udm ul a.udmY:focus, #udm ul a.udmY:visited:hover, #udm ul a.udmY.udmR, #udm ul a.udmY.udmR:visited, #udm ul a.udmY:active {
	background-color:#fec;
	}

That's quite a simple example, but it should give you the general idea. Have a look at the MSDN demo for a similar example in practise.

If you're using any additional menu classes you can add extra rules for them as well:

• Skip code example

/* [orange menu] default you are here will be same as rollover or inherit from default menu styles unless otherwise specified */
#udm ul li.orangeMenuItem a.udmY, #udm ul li.orangeMenuItem a.udmY:visited {
	background-color:#feecc4;
	}

/* [orange menu] re-inforce original rollover or do something else */
#udm ul li.orangeMenuItem a.udmY:hover, #udm ul li.orangeMenuItem a.udmY:focus, #udm ul li.orangeMenuItem a.udmY:visited:hover, #udm ul li.orangeMenuItem a.udmY.udmR, #udm ul li.orangeMenuItem a.udmY.udmR:visited, #udm ul li.orangeMenuItem a.udmY:active {
	background-color:#f8fbd0;
	}

Implementation notes

You don't need to use absolute links in your navigation for this to work - relative or root paths are fine - because the href property of a link is [or should be] fully qualified: "http://www.domain.com/page.html" for an attribute value of "page.html".

If the extension is used on a page which contains the menu, but which isn't linked in the menu tree, the tree will be highlighted as deep as it goes to that location. This page is a good example: the highlighting gets as far as the "Modules & Extensions" link in the "About" menu. If no better match is found, the script will end up with the shortest link that's wholly contained within the current address - most likely a link to the home page.

This extension can't really be used in a frameset - partly because the address it compares against will be the address of the frameset, and partly because the highlighting is tied to onload - so in most framed environments the indicated link will never change (unless by some contrivance every page is a unique frameset).

Browser notes

This extension is not supported in Safari < 1.2, because earlier builds don't qualify the href property (they're the should be I mentioned earlier).

• ← More extensions

Search