<HTML>
<HEAD>
<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
padding : 25px 0px 25px 0px; // <-- har indsat denne linie, kan selvfølgelig justeres
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site:
http://hem.passagen.se/dred -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
<!-- Begin
// 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
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[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "
http://javascript.internet.com/img/category-menus/opened.gif";}
else if (document.all) {
document.all(pic).src = "
http://javascript.internet.com/img/category-menus/opened.gif"; }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "
http://javascript.internet.com/img/category-menus/closed.gif";}
else if (document.all) {
document.all(pic).src = "
http://javascript.internet.com/img/category-menus/closed.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[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).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[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).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[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
function tellDemo() {
alert('This link would open in the right frame, but this is just a demo!');
return false;
}
// End -->
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<div class="title" id="title1" style="top: 0px">
<a href="#" onclick="java script: toggle(1,80); return false"><img name="pic1" src="
http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 1</a>
</div>
<div class="submenu" id="submenu1" style="top: 20px">
<a href="java script:tellDemo();">Item # 1</a><br>
<a href="java script:tellDemo();">Item # 2</a>
</div>
<div class="title" id="title2" style="top: 20px">
<a href="#" onclick="java script: toggle(2,110); return false"><img name="pic2" src="
http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 2</a>
</div>
<div class="submenu" id="submenu2" style="top: 40px">
<a href="java script:tellDemo();">Item # 3</a><br>
<a href="java script:tellDemo();">Item # 4</a><br>
<a href="java script:tellDemo();">Item # 5</a><br>
<a href="java script:tellDemo();">Item # 6</a>
</div>
<div class="title" id="title3" style="top: 40px">
<a href="#" onclick="java script: toggle(3,95); return false"><img name="pic3" src="
http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 3</a>
</div>
<div class="submenu" id="submenu3" style="top: 60px">
<a href="java script:tellDemo();">Item # 7</a><br>
<a href="java script:tellDemo();">Item # 8</a><br>
<a href="java script:tellDemo();">Item # 9</a>
</div>
<div class="title" id="title4" style="top: 60px">
<a href="#" onclick="java script: toggle(4,110); return false"><img name="pic4" src="
http://javascript.internet.com/img/category-menus/closed.gif" border="0">Category 4</a>
</div>
<div class="submenu" id="submenu4" style="top: 80px">
<a href="java script:tellDemo();">Item # 10</a><br>
<a href="java script:tellDemo();">Item # 11</a><br>
<a href="java script:tellDemo();">Item # 12</a><br>
<a href="java script:tellDemo();">Item # 13</a>
</div>
<br><br><br><br><br><br><br><br><br>
<center>
<font face="arial, helvetica" size="-1"><a href="category-menus-faq.html" target="_new">Need help?<br>Read the FAQs</a></font>
</center>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
