28.04.2006, 12:15
Hi,
das mit den Untermenüs geht schon....
Was Du brauchst:
1. Das Javascript speicherst Du unter menu.js
2. Das Menü
Anpassen musst Du hier den Namen der Seite die aufgerufen werden soll (index.html) und den Target (content), bei Dir "main"
Wenn Du erstmal ausprobieren willst speichere beide Sachen in einen Ordner und rufe die html Seite auf.
Cu Helmut
das mit den Untermenüs geht schon....
Was Du brauchst:
1. Das Javascript speicherst Du unter menu.js
Code:
var tabelle='';
function open_menu_table(id) {
var i=0;
if(tabelle!=id) {
if(tabelle) {
open_menu_table(tabelle);
}
} else {
tabelle='';
}
while(i<=tabelle) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'inline';
tabelle=id;
} else {
document.getElementById(id).style.display = 'none';
}
i++;
}
}2. Das Menü
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script src="menu.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial;
}
.toprub a {
display: block;
font-size: 11px;
font-weight: bold;
background-color: #ffcc33;
border: 1px solid #000000;
padding: 2px;
width: 140px;
margin: 1px;
color: #000000;
text-decoration: none;
}
.toprub a:hover {
border: 1px solid #000000;
background-color: #ff9933;
text-decoration: none;
}
.subrub a {
display: block;
border: 1px solid #b78566;
background-color: #f2ecdb;
padding: 2px;
font-size: 11px;
width: 140px;
margin: 1px;
color: #990033;
text-decoration: none;
}
.subrub a:hover {
border: 1px solid #b78566;
background-color: #d8cab1;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="toprub"><a onfocus="this.blur()" href="javascript://" onClick="open_menu_table('rubrik1');return false;">Rubrik 1</a></div>
<div class="subrub" id="rubrik1" style="display:none">
<a href="index.html" target="content">Rubrik 1 Link 1</a>
<a href="index.html" target="content">Rubrik 1 Link 2</a>
<a href="index.html" target="content">Rubrik 1 Link 3</a>
<a href="index.html" target="content">Rubrik 1 Link 4</a>
<a href="index.html" target="content">Rubrik 1 Link 5</a>
<a href="index.html" target="content">Rubrik 1 Link 6</a>
</div>
<div class="toprub"><a onfocus="this.blur()" href="javascript://" onClick="open_menu_table('rubrik2');return false;">Rubrik 2</a></div>
<div class="subrub" id="rubrik2" style="display:none">
<a href="index.html" target="content">Anderer Link 1</a>
<a href="index.html" target="content">Anderer Link 2</a>
<a href="index.html" target="content">Anderer Link 3</a>
<a href="index.html" target="content">Anderer Link 4</a>
</div>
<div class="toprub"><a onfocus="this.blur()" href="javascript://" onClick="open_menu_table('rubrik3');return false;">Rubrik 3</a></div>
<div class="subrub" id="rubrik3" style="display:none">
<a href="index.html" target="content">Rubrik 3 Link 1</a>
<a href="index.html" target="content">Rubrik 3 Link 2</a>
<a href="index.html" target="content">Rubrik 3 Link 3</a>
<a href="index.html" target="content">Rubrik 3 Link 4</a>
<a href="index.html" target="content">Rubrik 3 Link 5</a>
<a href="index.html" target="content">Rubrik 3 Link 6</a>
</div>
<div class="toprub"><a onfocus="this.blur()" href="javascript://" onClick="open_menu_table('rubrik4');return false;">Rubrik 4</a></div>
<div class="subrub" id="rubrik4" style="display:none">
<a href="index.html" target="content">Rubrik 3 Link 1</a>
<a href="index.html" target="content">Rubrik 3 Link 2</a>
<a href="index.html" target="content">Rubrik 3 Link 3</a>
<a href="index.html" target="content">Rubrik 3 Link 4</a>
<a href="index.html" target="content">Rubrik 3 Link 5</a>
<a href="index.html" target="content">Rubrik 3 Link 6</a>
</div>
</body>
</html>Anpassen musst Du hier den Namen der Seite die aufgerufen werden soll (index.html) und den Target (content), bei Dir "main"
Wenn Du erstmal ausprobieren willst speichere beide Sachen in einen Ordner und rufe die html Seite auf.
Cu Helmut
![[-]](https://forum.juergens-workshops.de/images/collapse.png)