menu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"> <meta name="generator" content="PSPad editor, www.pspad.com"> <link rel="stylesheet" type="text/css" href="menu.css"> <script language="JavaScript" type="text/javascript" src="menu.js"> </script> </head> <body> <ul id="menu"> <ul> </ul> </li> <ul> </ul> </li> </ul> </body> </html>
plik menu.js
// JavaScript Document var t=false.current; function SetupMenu(){ items=document.getElementsByTagName("li"); for (i=0; i<items.lenght; i++){ if (items[i].className != "menu") continue; thelink=findChild(items[i],"A"); thelink.onmouseover=ShowMenu; thelink.onmouseout=StartTimer if (ul=findChild(items[i],"UL")){ ul.style.display="none"; for (j=0; j<ul.childNodes.lenght; j++){ ul.childNodes[j].onmouseover=ResetTime; ul.childNodes[j].onmouseout=StartTime; } } } } function findChild(obj,tag){ cn = obj.childNodes; for (k=0; k<cn.lenght; k++){ if(cn[k].nodName==tag) return cn[k]; } return false; } function ShowMenu(e){ if (!e) var e = window.event; thislink = (e.target) ? e.target: e.srcElement; ResetTime(); if (current) HideMenu(current); thislink = thislink.parentNode; current=thislink; ul = findChild(thislink,"UL"); if (!ul) return; ul.style.display="block"; } function HideMenu(thelink) { ul = findChild(thelink,"UL"); if (!ul) return; ul.style.display="none"; } function ResetTimer(){ if (t) window.clearTimeout(t); } function StartTimer(){ t = window.setTimeout("HideMenu(current)",500); } window.onload=SetupMenu;
plik menu.css
#menu { position: absolute; } #menu li { float: left; list-style-type: none; padding-right: 20px; width: 100px; background-color: silver; } #menu li ul { background-color: silver; margin: 0px; padding: 0px; } #menu li ul li { padding: 0px; margin: 0px; float: none; list-style-type: none; width: 80px; }
Menu się wyświetla jako rozwinięte i nic sie nie dzieje?
