The Steps
To make your own menu, do the following steps:Using the Quick Editor, set up the links. Choose from the selections below.
To make your own menu, do the following steps:
- Make the menu and submenu objects The menu items here are individual lines of text. The submenus are text objects. Each text object has a shade (the same pale yellow) and a one pixel border. I used the Quick Editor to do this. Use the default name for the submenus -- they should have a form like 'obj1046'
- Include the code object shown below
- Hide the submenus while loading and when loaded. Use the Object Editor > Options or Main Menu Special FX
Bruceee's Sandpit
Web Design with SiteSpinner
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()"
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:
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:
<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>
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>
Restrictions
These menus are still experimental and have a number of restrictions:
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.
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.
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.
Suggestion
Consider making the code object part of a javascript include file. That way you can use the identical code on all pages.
Consider making the code object part of a javascript include file. That way you can use the identical code on all pages.
navigation
navigation
navigation