JavaScript Cases: Highlighted Topic


Menu Expand/Collapse Menu

The java script for highlighting the selected topic in the menu/TOC 1st calls the submenu handler (line 16) to expand or collapse the specified submenu if set. Next (lines 18-20) the path to the page is parsed for the page name: sPg_Name. The default CSS class is "Selected_MenuItem". However, if the selected item is in a submenu then 2 CSS classes are needed: subMenu & Selected_MenuItem.

Finally, line 27 calls the highlight function when the page is displayed (when the window.onload event occurs).

Code provided in screenshot for study only, hence no copy/paste.

Each menu item has a span ID property set to the page name. When the page is displayed in the browser, the Selected_MenuItem CSS class is applied to menu item that corresponds to the page being displayed.

JScript Cases