View Full Version : javascript menu

08-07-2006, 09:35 AM
I've made a webpage with a javascript menu. It writes itself on the page with a document.write function so maybe that's the reason for my problem:

The submenus are invisible when the page loads but add themselves to the bottom of the page and the page becomes very long. The scrollbar indicates it. But when i mouseover all menuitems the long space disappears.
Could somebody help me to investigate and solve this problem?
I want to hide that space when the page loads.

Please scroll to bottom of the page before using the menu.


Thanks in advance

08-07-2006, 10:56 AM
AFAIK this problem is available only in IE.
I know this whole script is not "nice" but I don't have time to clean it up better and it's only a test page.
And the position:fixed part is really ugly too.. the submenus scroll with the page while using scrollwheel....

08-07-2006, 12:11 PM
was playing with this which may be of interest

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<style type="text/css">
.topic {

.stopicoff {

.stopicon {

.main {


<script type="text/javascript">

function zxcMenu(zxcid){
var zxcevt=window.event||arguments.callee.caller.arguments[0]; // establishes the event
var zxcobj=zxcEventObj(zxcevt); // establish the event object
var zxcp=zxcobj; // find the menu parent element by looking up th dom tree for the ID
while (zxcp.parentNode){
if (zxcp.id==zxcid){ break; } // the menu parent div has been found
if (!window['zxc'+zxcp.id]){ // we need an array specific to the menu so base it on the id of the menu parent div
window['zxc'+zxcp.id]=[null]; // make the array object, first field being null
var zxcds=zxcp.getElementsByTagName('DIV'); // collect all divs
for (var zxc0=1;zxc0<zxcds.length;zxc0++){
if (zxcds[zxc0].style.display=='none'){ // if display:none it is a sub menu
window['zxc'+zxcp.id].push([zxcds[zxc0-1],zxcds[zxc0]]); // add it to the array, sub field 0 the <div> to control,sub field 1 the div to toggle
var zxcary=window['zxc'+zxcp.id]; // saves typing
if (zxcevt.type=='mouseout'){ // if the event type is mouse out
if (zxcWHCkEventObj(zxcevt,zxcid)){ zxcary[0][1].style.display='none'; } // check to see if the target is outside the menu, if so hide the last opened sub menu
return; // dont do any more
for (var zxc0=1;zxc0<zxcary.length;zxc0++){ // loop though the array
if (zxcary[zxc0][0]==zxcobj){ // finding a matck for the event object
if (zxcary[0]){ if (zxcobj!=zxcary[0][0]){ zxcary[0][1].style.display='none'; } } // if field 0 and field 0[0] not the event object hide field0[1]
zxcary[0]=zxcary[zxc0]; // enter the array field in field 0
zxcary[zxc0][1].style.display=(zxcary[zxc0][1].style.display=='none')?'':'none'; // toggle the div associated with the event object

function zxcEventObj(zxce){ // the returns the event object
if (!zxce) var zxce=window.event;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;

function zxcWHCkEventObj(zxce,zxcid){ // this looks for an element with the passed id,
var zxceobj;
if (!zxce) var zxce=window.event;
if (zxce.stopPropagation) zxce.stopPropagation();
while (zxceobj.parentNode){
if (zxceobj.id==zxcid){ return false; } // returns false if found
return true; // returns true if not found

function zxcInitMenu(zxcid,zxccls){
var zxcds=document.getElementById(zxcid).getElementsByTagName('DIV');
var zxccnt=0;
for (var zxc0=0;zxc0<zxcds.length;zxc0++){
if (zxcds[zxc0].className==zxccls){
if (zxcds[zxc0+1]){



<body onload="zxcInitMenu('top','main')">
<div id="top" style="position:absolute;left:0px;top:0px;width:120px;border:solid black 0px" onmouseover=zxcMenu('top'); onmouseout="zxcMenu('top');" >
<div class="main" >A</div>
<div class="main" >B</div>
<div class="topic" style=left:20px;height:60px;display:none;" >
<a href="http://www.vicsjavascripts.org.uk" ><div class="stopicoff" >Industrial</div></a>
<a href="http://www.js-examples.com" ><div class="stopicoff" >Contemporary</div></a>
<a href="http://www.codingforums.com" ><div class="stopicoff" >Post-Modern</div></a>
<div class="main" >C</div>
<div class="topic" style=left:20px;height:60px;display:none;" >
<div class="stopicoff" >How To 1</div>
<div class="stopicoff" >How To 2</div>
<div class="stopicoff" >How To 3</div>
<div class="main" >D</div>


08-07-2006, 03:10 PM
Thank you very much for your example but i'd rather use the old script because i wasted so much time with this old one. That's why i'm looking for a solution.