Ausklappmenü (einfach und mit DHTML) - aber wie?

sunset_rider · 14. Dezember 2005

Hallo,

ich möchte mir gern ein simples, überschaubares Ausklappmenü wie von folgender Seite programmieren: http://schloss-burgk.de

Ich komme aber leider mit DHTML nicht besonders gut klar. Habe mal nach Vorlage eines Buches ein Menü programmiert, dochd as funktioniert nicht wie gewünscht (siehe unten).

Kennt sich von euch jemand mit DHTML einigermaßen aus und kann mir helfen ein einfaches Menü auf die Beine zu stellen? Vielen Dank im Voraus für eure Hilfe!

HTML:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
</head>

<script language="javascript">
var openmenu="menu1";
if(document.layers)
	{window.captureEvents(Event.MOUSEDOWN);
	 window.onmousedown=ausblenden;
	} else
	{document.onmousedown=ausblenden;
	}
	
function einblenden(param)
{	openmenu=param:
	if	(document.layers)
	document.layers[openmenu].visibility = "show";
	else
	doecument.all[openmenu].style.visibility = "hidden";
}
function ausblenden()
{	if	(document.layers)
	document.layers[openmenu].visibility = "hide";
	else
	doecument.all[openmenu].style.visibility = "hidden";
}
</script>

<style type="text/css")
</style>
</head>
<body>
<div id="menu1" sytle="width:93 px; position: absolute;
	visibility: hidden;
	 left: 10px; top: 40px">
	<a href="seite1.htm">Tagebuch</a> <br>
	


</div>
<div id="menu2" sytle="width:93 px; position: absolute;
	visibility: hidden; left: 105px">
	<a href="seite2.htm">left</a><br>
	


</div>

<div style="background-color:rgb(232,219,108); width:190 px">
	<a href=javascript:einblenden('menu1')">Spalte1</a>
	
	<a href=javascript:einblenden('menu2')">Spalte2</a>
		
</div>

</body>

</html>

daemon777 · 15. Dezember 2005

Ehrlich gesagt finde ich grade den Fehler nicht. Wenn du allerdings darauf verzichten kannst, dass das Menü nicht in der Funktion übergeben wird sondern schon vorher festgelegt ist, dann sollte das ganze ungefähr so aus sehen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
	<title>DHTML Test Seite</title>

	<link rel="stylesheet" type="text/css" href="index.css">

	<script type="text/javascript">
		var n4, ie, w3c;

		function init()
		{
			n4=document.layers;
			ie=document.all;
			w3c=document.documentElement;
		}

		function showNav()
		{
			if(ie)
			{
				document.all.naviBar.style.visibility='visible';
			}
			else if(w3c)
			{
				document.getElementById('naviBar').style.visibility='visible';
			}
			else
			{
				alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
			}
		}

		function hideNav()
		{
			if(ie)
			{
				document.all.naviBar.style.visibility='hidden';
			}
			else if(w3c)
			{
				document.getElementById('naviBar').style.visibility='hidden';
			}
			else
			{
				alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
			}
		}
	</script>
	
	
</head>

<body onLoad="init()">
	<div id="leftBorder" onMouseOver="showNav()" onMouseOut="hideNav()"></div>
	<div id="naviBar" onMouseOver="showNav()" onMouseOut="hideNav()">
		<ul type=none>
			<li><hr border=1><h1>Die Links</h1><hr noshade border=3></li>
			<li><a href="http://www.google.de">Google<hr border=1></a></li>
			<li><a href="https://www.computerbase.de">Computerbase</a><hr border=3></li>
			<li><a href="http://www.gmx.net">GMX</a><hr border=3></li>
			<li><a href="index.html">Zurück zur Hauptseite</a><hr border=3></li>
		</ul>
	</div>
  
	
</body>

</html>

Kannst du ja mal ausprobieren und dann versuchen deinen Code so abzuändern dass es funktioniert. Wie gesagt ich komm grad nicht drauf was du falsch gemacht hast.

ViP3 · 20. Dezember 2005

Hallo dämon

Aso und @ topic:

Suche

Ausklappmenü (einfach und mit DHTML) - aber wie?

sunset_rider

Lt. Commander

daemon777

Lt. Commander

ViP3

Newbie

Ähnliche Themen