Tutorials and code on highlighting current navigation active state
- See also: Tree Menus
- See also: CSS Menus
- See also: PHP Menus
- See also: DHTML Menus
Note: the following DOM can be used to highlight a page:
document.getElementById('LinkID').className = 'active';
- JavaScript current nav highlight
-
Tjkdesign.com - current location
Replaces the current anchor with an EM element or 'plugs' a class in that anchor. Using the DOM rather than contextual selectors to "mark" the current text link enables you to have no instances of IDs in the markup and just one CSS rule.
-
Richnetapps.com - automatically highlight current page
Javascript DOM gets the current URL, cycles to all links that are contained in the navigation tag with id="navbar", then, if the link points to the same page, the code applies a class to the link.
-
Surguy.net - Menu highlight
There is no JavaScript being used for actually displaying the menu, JavaScript is being used to highlight the menu item that corresponds to the current page.
-
Dhtmlcentral.com - Indicate current page
FoldOutMenu: indicate current page, highlight menu. Script to create fold out menu and highlight the current page automatically.
-
Divahtml.com - current menu location
divaGPS lets users know just where they are on your website. It does this by automatically highlighting the current navigation elements on the page.
- PHP current nav highlight
-
Alistapart.com - keeping current
Add these current-page indicators automatically using CSS body IDs or PHP includes.
-
Discomoose.org - current page indicators
PHP finds the URI from the $_SERVER array, (a superglobal variable), retrieves the values of are 'HTTP_HOST', 'SCRIPT_NAME' and 'QUERY_STRING' for the three different parts of the url. Alternatively, it use 'REQUEST_URI'.
-
Lists.evolt.org - PHP current page
PHP script to dynamically create an unordered list from links added in the PHP then compared the address with the URL to add an active class. Check modRewrite.
-
Lists.evolt.org - PHP current page
PHP script to dynamically create an unordered list from links added in the PHP then compared the address with the URL to add an active class. Check modRewrite.
-
Maketemplate.com - PHP determine current page
The included menu for this web site uses one 'menu template' file for all pages. It is loaded with SSI (Server Side Include) so only the one include menu file is required. Then the included menu indicates which page is active
-
Onlinetools.org - Eeasy Nav
EasyNav is a PHP script that allows you to automatically highlight the current section in a navigation. Create your navigation as a plain nested list with links and include the script script in your documents via an include here you want the navigation to appear.
-
Webaccessstrategies.com - Dynav menu script
Include this script with a hand-coded list of menu options to display a menu. It loops through them to create the menum, compares the link destination with the location of the current page and either creates a link or does not create the link/ changes the CSS class.

