Site hosted by Angelfire.com: Build your free website today!
The Steps
To make your own menu, do the following steps:

Bruceee's Sandpit
Web Design with SiteSpinner
home
home
home

Useful Link Stuff
To access functions in the code object, include the following javascript in your link URLs. (The link type is blank)

Display a menu on mouseover. The number in the brackets is the object number of the menu to be displayed as in 'obj1046'

javascript:"onmouseover="ShowMenu(1046)"

Display a menu on a click. The number in the brackets is the object number as in 'obj1046'
javascript:ShowMenu(1046)

Hide the currently displayed menu on mouseover
javascript:"onmouseover="Hide()"

Hide the currently displayed menu on mouseover, and jump to a page on click
SiteMap.html"onMouseOver="Hide()"
Menus
Here is a way to make drop-down or pull-out menus using only SiteSpinner -- no third party tools.

This is based on showing or hiding a submenu object when you mouse over a main menu object. This is quite similar to a regular SiteSpinner mouseover, except that the submenu has to stay visible when you mouse off the main menu.

You have complete flexibility as to the components graphics, text, size etc.

Here is an example of what I have so far -- mouse over the menu below:
navigation
navigation
navigation
Navigation main page
<script language="JavaScript">
var LastShown=0;  //Pointer to sub-menu currently displayed

function Hide() {
//Hide last shown menu
if (LastShown!=0) {LastShown.style.visibility = "hidden"};
}

function HideOnMouseOut(e)
//Hide menu on mouse out. Complicated to keep Netscape and Opera happy
{
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV')
return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg=reltg.parentNode
if (reltg==tg)
return;
Hide();
}

function ShowMenu(aID)
//Hide existing displayed menu, then display a new one
{
Hide();
LastShown=document.getElementById("Oobj"+String(aID));
LastShown.style.visibility = "visible";
LastShown.onmouseout=HideOnMouseOut;
}
</script>
The Code Object
Include the following code object on your page:
Restrictions
These menus are still experimental and have a number of restrictions:
  • I have not been able to get mouseover effects to work inside text objects. All those  I used above are working at the level of the object itself.
  • So far I have considered only a main menu and one level of sub-menus. More levels of sub-menus would be possible. The requirement is to keep the higher level sub-menus displayed while displaying the lower level level. I.e. Multiple menus need to be displayed on screen at once -- different from the current arrangement.
  • You can't clone or copy menus or sub-menus without making changes -- you need to adjust the links as the object names change under this condition.
  • Cheshire Cat bug: If you have a sub-menu which has mouseovers on it, the mouseovers remain active, even when the submenu is invisible. Like the 'Alice in Wonderland' cat that disappeared except for it's grin. It may be possible to avoid this  problem by moving the sub-menu off-screen when invisible but I have not investigated this.
Bonus
You can 'include' these menus on more than one page. It would be nice if the link for the current page was automatically disabled under this condition.
| Home | Bandwidth | Code | Images | Map | Music | Navigation | Review | Sounds | Email |
   Introduction
   Buttons
   Bookmarks
   Menus (here)
   Nav Bars (Coming)
  Bandwidth . . . .
  Code . . . .           
  Site Map             
  Navigation . . . .
  Sound . . . .        
  Images . . . .       
  Review                
Suggestion
Consider making the code object part of a javascript include file. That way you can use the identical code on all pages.