Denna bör göra vad du vill:
------------------
<HTML>
<HEAD>
<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 208px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 208px;
font-family: verdana;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.
var nom = 4; // !!!!!!!!!!!! NUMBER OF MENUS IMPORTANT YOU ARE USING !!!!!!!!!!!!
var usePictures = 1; // use pictures? 1 = yes, 0 = no
var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls = ('title' + i);
subs = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/WhenMenuIsClosed.gif";
}
else if (document.all) {
document.all(pic).src = "images/WhenMenuIsClosed.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/WhenMenuIsOpen.gif";
}
else if (document.all) {
document.all(pic).src = "images/WhenMenuIsOpen.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top += move;
document.layers[subs].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
function home()
{
top.self.location.href="admin.html";
}
// -->
</script>
</HEAD>
<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="2" cellspacing="0" cellpadding="0">
<!--MENU 1-->
<div class="title" id="title1" style="top: 35px">
<a href="#" target="xxx" onclick="javascript: toggle(1,20); return false"><img name="pic1" src="images/WhenMenuIsClosed.gif" border="0"> MENU OPTION 1</a>
</div>
<div class="submenu" id="submenu1" style="top: 55px">
<img src="images/WhenMenuIsOpen.gif"><a href="xxx.html" target="xxx">SubMenuOption<br>
</div>
<!--MENU 2-->
<div class="title" id="title2" style="top: 55px">
<a href="#" target="xxx" onclick="javascript: toggle(2,20); return false"><img name="pic2" src="images/WhenMenuIsClosed.gif" border="0"> MENU OPTION 2</a>
</div>
<div class="submenu" id="submenu2" style="top: 75px">
<img src="images/WhenMenuIsOpen.gif"> <a href="xxx.html" target="xxx">SubMenuOption1</a><br>
</div>
<!--MENU 3-->
<div class="title" id="title3" style="top: 75px">
<a href="#" target="xxx" onclick="javascript: toggle(3,20); return false"><img name="pic3" src="images/WhenMenuIsClosed.gif" border="0"> MENU OPTION 3</a>
</div>
<div class="submenu" id="submenu3" style="top: 95px">
<img src="images/WhenMenuIsOpen.gif"> <a href="xxx.html" target="xxx">SubMenuOption1</a><br>
</div>
<!--MENU 4-->
<div class="title" id="title4" style="top: 95px">
<a href="#" target="xxx" onclick="javascript: toggle(4,30); return false"><img name="pic4" src="images/WhenMenuIsClosed.gif" border="0"> MENU OPTION 4</a>
</div>
<div class="submenu" id="submenu4" style="top: 115px">
<img src="images/WhenMenuIsOpen.gif"> <a href="xxx.html" target="xxx">SubMenuOption1</a><br>
<img src="images/WhenMenuIsOpen.gif"> <a href="xxx.html" target="xxx">SubMenuOption2</a><br>
</div>
</BODY>
</HTML>
---------------
MvH
/A
