Menu (Collapse Cascade)

JavaScript Code for

By Vic Phillips http://www.VicsJavaScripts.org.uk
Based on my MakeMenu Script this cascade menu collapes when anther topic is selected.

The menu is defined in HTML code and the menu 'Style' definitions
modified by javascript customising variables and functional code.

Menu 1 Topic 1

Target = top

Target = RightFrame

Target = JavaScript

Menu 1 Topic 2

Menu 1 Topic 2 Sub 1

Menu 1 Topic 2 Sub 1 Ext 1

Menu 1 Topic 2 Sub 1 Ext 2

Menu 1 Topic 2 Sub 2

Menu 1 Topic 2 Sub 2 Ext 1

Menu 1 Topic 3

Menu 1 Topic 3 Sub 1

Menu 1 Topic 3 Sub 2

Menu 1 Topic 2 Sub 2 Ext 1

Menu 2 Topic 1

Target = top

Target = RightFrame

Target = JavaScript

Menu 2 Topic 2

Menu 2 Topic 2 Sub 1

Menu 2 Topic 2 Sub 1 Ext 1

Menu 2 Topic 2 Sub 1 Ext 2

Menu 2 Topic 2 Sub 2

Menu 2 Topic 2 Sub 2 Ext 1

Menu 2 Topic 3

Menu 2 Topic 3 Sub 1

Menu 2 Topic 3 Sub 2

Menu 2 Topic 2 Sub 2 Ext 1

An additional Menu added by additional HTML Code
and adding 'mccInitialise('mccMyMenu2') to the <body> onload event.

The mcPart1 includes application notes and the customising variables.

// Application Summary

// The menu 'style' definition must be available MccPart1

// The initial style of the Menu and topics is defined in mccPart1
// The style classes are
// for the Menu Panel                  = mccMenuPanel
// for the Sub & Extension Menu Panels = mccSubExtPanel
// for the Main Topics                 = mccMainTopic
// for the Sub Topics                  = mccSubTopic
// for the Ext Topics                  = mccExtTopic

// if more than one Style is required the class name may have a suffix and used in the HTML definition

// styles are modified by the JavaScript Customising Variables

// The mccPart2 (Functional Code) must be available.

// a <body> onload call is required e.g. <body onload="mccInitialise('mccMyMenu');" >
// If more than one menu is to be initialised the <body> onload event
// should include calls for each menu e.g.
// <body onload="mccInitialise('mccMyMenu');mccInitialise('mccMyMenu2');"  >

// Example HTML Code

// <div class="mccMenuPanel" id="mccMyMenu" >
//  <div class="mccMainTopic" >Menu 1 Topic 1</div>
//  <div class="mccSubExtPanel" >
//   <div class="mccSubTopic" ><a href="MakeMenu.htm" target="_top">Target = top</a></div>
//   <div class="mccSubTopic" ><a href="MakeMenu.htm" target="RightFrame" >Target = RightFrame</a><img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//   <div class="mccSubTopic" ><a href="javascript:mccJavaScriptCall();" target="JavaScript" >Target = JavaScript</a><img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//  </div>
//
//  <div class="mccMainTopic" >Menu 1 Topic 2<img src="Image1.jpg" width="0" height="0" ></div>
//  <div class="mccSubExtPanel" >
//   <div class="mccSubTopic" >Menu 1 Topic 2 Sub 1<img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//   <div class="mccSubExtPanel" >
//    <div class="mccExtTopic" >Menu 1 Topic 2 Sub 1 Ext 1<img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//    <div class="mccExtTopic" >Menu 1 Topic 2 Sub 1 Ext 2<img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//   </div>
//   <div class="mccSubTopic" >Menu 1 Topic 2 Sub 2<img src="Image1.jpg" width="0" height="0" ></div>
//   <div class="mccSubExtPanel" >
//    <div class="mccExtTopic" >Menu 1 Topic 2 Sub 2 Ext 1<img src="Image1.jpg" width="0" height="0" ><img src="Image2.jpg" width="0" height="0" ></div>
//   </div>
//  </div>
//
// </div>

// Add Main, Sub and Ext Topics as required

// Images (optional)
// The first image is the MouseOut Image
// The second is the MouseOver Image
// The MouseOut Image is removed on Topic MouseOver
// NOTE: The image width and height must be specified as '0'

// Links (optional)
// The target must be specified.
// The link target is used to establish the requirement
// A target specified as '_top' or '_blank' will replace the current page with the specified URL.
// A target specified as the target frame name replace the frame URL with the specified URL.
// If the target frame name cannot be found the link will not be actioned.
// A target specified as 'JavaScript' will action the function specified as the URL.
// eg <a href="javascript:mccJavaScriptCall('Australia')" target="JavaScript">

// The menu needs to be positioned absolute to prevent disrupting the page layout when reveling sub menus
// An anchor is positioned above the Menu
// The anchor is recorded in the first Menu Topic Object .anchor
// then Menu positioning changed to absolute then the Menu positioned at the anchor position
// The anchor is later set to the height of the collapsed Menu

// On Page ReSize the Menu Object should be prepositioned to the Menu Object .anchor position

// Customising Variables

var mccZIndex=1;                          // The menu may need to be above othe page elements
var mccMarker='<img src="Marker1.gif" >'; // Marks Topics with Sub Menus, for No Marker use =null;
var mccMarkerDwn='↓';                // Marks Topics(Collapsed) with Sub Menus, for No Marker use =null;
var mccMarkerUp='↑';                 // Marks Topics(Reveled) with Sub Menus, for No Marker use =null;
var mccSpeed=5;                           // Cascade Speed
var mccInc=3                              // Cascade Increment

// The Menu Main Topic properties
var mccMainSeparation=1;           // the separation between Main Topics
var mccMainOverBGColor='#CC9900';  // the MouseOver background color
var mccMainOverTxtColor='#FFFFFF'; // the MouseOver text color
var mccMainTxtOffSetX=10;          // text horizontal offset from the parent topic
var mccMainTxtOffSetY=0;           // text horizontal offset from the parent topic

// The Menu Sub Topic properties
var mccSubSeparation=1;
var mccSubOverBGColor='#FFFFFF';
var mccSubOverTxtColor='#6600FF';
var mccSubTxtOffSetX=5;
var mccSubTxtOffSetY=2;

// The Menu Ext Topic properties
var mccExtSeparation=1;
var mccExtOverBGColor='#FFFFFF';
var mccExtOverTxtColor='#6600FF';
var mccExtTxtOffSetX=0;
var mccExtTxtOffSetY=2;

function mccJavaScriptCall(mcc){

// properties can be passed to this function via 'mccLink(mcc)'
 // this fuction can contain any JavaScript to carry out specific requirements.

alert('A JavaScript Function Call has been Activated');
}

//-->
</script>

The Style Definitions(typical).

.mccMenuPanel   { position:relative;
                  width:210px;
                  top:0px;
                  left:0px;
                  width:210px;
                  background-Color:;
                  border:solid black 0px;
                  text-align:left;
                }
.mccSubExtPanel { position:relative;
                  width:210px;
                  overflow:hidden;
                  top:0px;
                  left:0px;
                }
.mccMainTopic   { position:relative;
                  z-index:0;
                  top:0px;
                  left:0px;
                  width:200px;
                  height:25px;
                  background-Color:#FF9933;
                  border:solid black 1px;
                  text-align:left;
                  color:#000000;
                  font-size:20px;
                  cursor:hand;
                  cursor:pointer;
                }
.mccSubTopic    { position:relative;
                  z-index:1;
                  top:0px;
                  left:10px;
                  width:150px;
                  height:18px;
                  background-Color:#FFFF66;
                  border:solid black 1px;
                  text-align:left;
                  color:#000000;
                  font-size:11px;
                  cursor:hand;
                  cursor:pointer;
                }
.mccExtTopic    { position:relative;
                  z-index:2;
                  top:0px;
                  left:20px;
                  width:150px;
                  height:18px;
                  background-Color:#FF9933;
                  border:solid black 1px;
                  text-align:center;
                  color:#000000;
                  font-size:11px;
                  cursor:hand;
                  cursor:pointer;
                }
</style>

The mcPart2 Functional Code is in the ZIP Download below.

The Code
The Code is in four parts

mccPart1 The 'Style' Definitions.
mccPart2 Application Note and Customising Variables
mccPart3 Functional Code without Notes(about 11K)
The HTML Code defining the menu.

MakeMenu will also assist in explaining the code.
mccPart2 is best as an External JavaScripts

All variable, function etc names are prefixed with 'mcc'
to minimise conflicts with other JavaScripts

Tested with IE6, and Mozilla FoxFire.