[DHTML] dynamischer Menuinhalt

-|SoI|- Shadow · 22. Juni 2004

Hallo Allerseits,

ich habe in HTML eine Imagemap eingefügt und mittels DHTML unter verschiedene Bereiche Menus gesetzt. Genauer gesagt eine Tabelle, die dann unter den Menubereichen auftaucht. Allerdings hat die Tabelle immer den selben Inhalt. Ich hatte schon daran gedacht einen Array mit den Links und deren Namen zu befüllen, je nachdem auf welchen Imagemapbereich man geht. Jetzt kommt der Teil mit dem ich nicht klarkomme, nämlich die Tabelle dynamisch nach Arrayinhalt zu befüllen und wann???

-|SoI|- Shadow · 23. Juni 2004

also genauer gesagt habe ich zwei Dateien, eine myjs.js mit folgendem Inhalt

HTML:

//Funktion um das menu zu schreiben
function menu(name, sichtbar, links) {
	var element;
	element = document.getElementById("menu_layer");
	element.style.visibility = sichtbar;
	if (links != "") {
		element.style.left = links;
	}
}

und einen test.html

HTML:

<html>
	<head>
		<title>test</title>
		<style type="text/css">
			table {border-collapse: collapse;}
		</style>
		<script type="text/javascript" src="myjs.js"></script>
	</head>

	<body style="margin-top: 0px; margin-left: 0px;">

		<!-- Tabelle mit Hauptnavigationselementen -->
		<table border="1" width="260px">
			<tr>
				<td onmouseover="javascript:menu(1, 'visible', '10px')" onmouseout="javascript:menu(1, 'hidden')">Element1</td>
				<td onmouseover="javascript:menu(2, 'visible', '75px')" onmouseout="javascript:menu(2, 'hidden')">Element2</td>
				<td onmouseover="javascript:menu(3, 'visible', '140px')" onmouseout="javascript:menu(3, 'hidden')">Element3</td>
				<td onmouseover="javascript:menu(4, 'visible', '205px')" onmouseout="javascript:menu(4, 'hidden')">Element4</td>
			</tr>
		</table>
		<!-- Ende Tabelle mit Hauptnavigationselementen -->
		
		<!-- Tabelle mit Unternavigation -->
		<div id="menu_layer" style="visibility: hidden; position: absolute; top: 20px; left: -200px; width: 40px;" onmouseover="javascript:menu('', 'visible');" onmouseout="javascript:menu('', 'hidden');">
			<table border="1">
				<tr>
					<td><a href="test.html">test1</a></td>
				</tr>
				<tr>
					<td><a href="test.html">test2</a></td>
				</tr>
			</table>
		</div>
		<!-- Ende Tabelle mit Unternavigation -->

	</body>
</html>

Die Tabelle mit der Unternavigation möchte ich abhängig von der Tabelle mit der Hauptnavigation befüllen, kann mir jdm helfen?

Sgt_H4rtman · 24. Juni 2004

Hat mich zwar etwas Mühe gekostet, aber mit der Lösung kannst du sicherlich leben.

Als erstes mal die überarbeitete JavaScript-Datei.

HTML:

/* Die Menüeintrage, hier rein. */
var menu = new Array();
	menu['ELEMENT1'] = new Array();
	menu['ELEMENT1']['link'] = new Array('http://www.google.de', 'https://www.computerbase.de', 'http://www.heise.de');
	menu['ELEMENT1']['text'] = new Array('Google', 'ComputerBase', 'Heise Online');
	
	menu['ELEMENT2'] = new Array();
	menu['ELEMENT2']['link'] = new Array('http://www.3dcenter.de', 'http://www.planet3dnow.de');
	menu['ELEMENT2']['text'] = new Array('3D-Center', 'Planet 3DNow!');
	
/* Zähler für die Tabellenzeilen. */
var global_row = 0;

/*Funktion um das menu zu schreiben */
function getmenu(elemName, sichtbar, links) {
	var element;
	element = document.getElementById("menu_layer");
	if (elemName != '' && sichtbar != 'hidden') {
		deleteTable();
		for (var row in menu[elemName]['link']) {
			writeTable(elemName, row);
		}
		global_row = 0;
	}	
	element.style.visibility = sichtbar;
	if (links != "") {
		element.style.left = links;
	}
}

/* Tabellenzeilen löschen. */
function deleteTable()
{
	var menuTable = document.getElementById('menuTable');	
	for (i = (menuTable.rows.length - 1); i > 0; i--) {
		menuTable.deleteRow(i);
	}
}

/* Tabellen erstellen. */
function writeTable(elemName, row) {
	var menuTable = document.getElementById('menuTable');
 	if (global_row == 0) menuTable.deleteRow(0);
 	
 	var TR = menuTable.insertRow(global_row++);		 	
 	var TD = document.createElement('td');
 	var mylink 		= document.createElement('a');
 	var linkText 	= document.createTextNode(menu[elemName]['text'][row]);
 		mylink.appendChild(linkText);
 		mylink.href = menu[elemName]['link'][row];		 	
 	TD.appendChild(mylink);
 	TR.appendChild(TD);
}

Als nächstes brauchst Du 1 - 2 Änderungen an Deiner HTML-Datei.

HTML:

<html>
	<head>
		<title>test</title>
		<style type="text/css">
			table {border-collapse: collapse;}
		</style>
		<script type="text/javascript" src="myjs.js"></script>
	</head>

	<body style="margin-top: 0px; margin-left: 0px;">

		<!-- Tabelle mit Hauptnavigationselementen -->
		<table border="1" width="260px">
			<tr>
				<td onmouseover="javascript:getmenu('ELEMENT1', 'visible', '10px')" onmouseout="javascript:getmenu('ELEMENT1', 'hidden')">Element1</td>
				<td onmouseover="javascript:getmenu('ELEMENT2', 'visible', '75px')" onmouseout="javascript:getmenu('ELEMENT2', 'hidden')">Element2</td>				
			</tr>
		</table>
		<!-- Ende Tabelle mit Hauptnavigationselementen -->
		
		<!-- Tabelle mit Unternavigation -->
		<div id="menu_layer" style="visibility: hidden; position: absolute; top: 20px; left: -200px; width: 40px;" onmouseover="javascript:getmenu('', 'visible');" onmouseout="javascript:getmenu('', 'hidden');">
			<table border="1" id="menuTable">
				<tr>
					<td>&nbsp;</td>
				<tr>				
			</table>
		</div>
		<!-- Ende Tabelle mit Unternavigation -->

	</body>
</html>

So und nun viel Spass damit.

Ciao

-|SoI|- Shadow · 25. Juni 2004

hey super,
danke hab es zwar noch nicht ausprobiert, aber trotzdem DANKE ;-)

greetz shadow

Suche

[DHTML] dynamischer Menuinhalt

-|SoI|- Shadow

Ensign

-|SoI|- Shadow

Ensign

Sgt_H4rtman

Ensign

-|SoI|- Shadow

Ensign

Ähnliche Themen