Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #115

I have section intro pages that I would like to display when the user clicks on a main section link in TreeMenu Magic. Is it possible to have that menu section trigger opened when the page loads?

The Answer

Prepared Nov. 2003 by Gerry Jacobsen, PVII

Note: This functionality is included and fully automated in the more recent Tree Menu Magic 2 system, simply click the "Allow Page Link on Trigger" option in the TMM2 user interface.

There are occasions when you would like to have a Menu Section item also link to another page, perhaps an intro page for that section.

Have a look at this TMM Open Section Link page to see a working demo for this tweak. The Menu Section One link on this page has been activated to load a new page whenever the link is clicked. When the new page is loaded, Menu Section One will automatically expand to show its submenu.

Here's a code tweak that enhances the functionality of the automatic opener to include the menu section links as well:

Updated: Feb. 10, 2005

How to...

1. First, activate the menu section link. Supply an actual hyperlink to load the desired page, this will take the place of the default hash (#). The link will now look like this:

<div><a href="open_tmm_section_one.htm" onClick="P7_TMenu(this);return false">Menu Section One</a>

2. We will also need to remove the ";return false" from the onClick event of the link, otherwise nothing will happen :-)

The link should now look like this:

<div><a href="open_tmm_section_one.htm" onClick="P7_TMenu(this)">Menu Section One</a>

3. Next, we'll make a code tweak to the P7_TMopen() function:

-Look for the 4th line in the script, it will look like this:

ha[i].className="p7currentmark";a=ha[i].parentNode.parentNode;while(a){

-Replace this entire line with these two lines:

if(ha[i].onclick&&ha[i].onclick.toString().indexOf("P7_TMenu")>-1){a=ha[i].parentNode;
  }else{ha[i].className="p7currentmark";a=ha[i].parentNode.parentNode;}while(a){

-Be sure that this is on exactly two lines.

4. Optionally, we'll make a small tweak that will prevent the link from opening or closing when clicked. This will prevent a momentary expand-collapse of the menu section while the linked page is being loaded into the browser:

-Add this line of code to the P7_TMenu() function , add it as the first line of code in the function:

if(og==9){return;}

it should look like this:

function P7_TMenu(b,og) { //v2.5 by Project Seven Development(PVII)
  if(og==9){return;}
  var i,s,c,k,j,tN,hh;if(doc......

5. Save the JavaScript file.

6. Now, to activate this feature:

-add a 9 as the second argument of the P7_TMenu() behavior on the menu link, so it looks like:

onClick="P7_TMenu(this,9)

the complete <a> tag would look like this:

<div><a href="open_tmm_section_one.htm" onClick="P7_TMenu(this,9)">Menu Section One</a>

That's It!

Now the menu will automatically open to any menu section or menu link item that corresponds to the page being loaded and, if the "9" option is used, the menu will not open when clicked.

Have a look at this TMM Open Section Link page to see a working demo for this tweak.

Deactivate page reloading when link is clicked

When you have the above TMM Open Section Link tweak applied the link is activated by removing the "return false" from the onClick event, so this will always load a new page when the menu item is clicked. You can add this bit of code to the onClick event that activates the link only if the current page is not the same as the link.

Here's how:

In Code View, the "#115 tweaked" menu section link would look like this:

<a href="myPage.htm" onClick="P7_TMenu(this)">Menu Section One</a>

Add this bit of code:

;return this.href!=window.location.href;

to the onClick event so it now looks like this:

<a href="myPage.htm" onClick="P7_TMenu(this);return this.href!=window.location.href;">Menu Section One</a>

Do this for any of the menu section links that you have activated with the above infoBase#115 tweak.

Now the menu section link will load the corresponding page when clicked, but will work as a normal link , allowing open and close functionality, when it is its corresponding page.

Using the TMM Modify system

Be sure to read and implement our infoBase article#122, How to Preserve the TMM Code Tweaks to assure that your code modifications will not be lost.

Please note, however, that the html markup of the menu will revert back to the default markup whenever you use the Modify system. This means that your markup modifications will be lost, you will need to remove the "return false" from any trigger links that you have activated and add back any other markup modifications you have made. We suggest avoiding the use of the Modify system when you have applied this tweak.

Back to the questions list