✔ Ein Dopdown Menü der besonderen Art..

sh0x

sh0x

Erfahrenes Mitglied
Hallo Javascriptler,

ich brauche mal eure Hilfe. Bin dabei, mir ein Menü mit Javascript zu basteln. Also so DHTML-mäßig.

Und zwar will ich Buttons haben. Wenn man mit der Maus darüber fährt, öffnet sich nach unten ein Untermenü, das wiederum Untermenüs haben kann.

Die einfache Variante bekomme ich hin, nämlich dass sich ein Untermenü öffnet, wenn man auf einen der Hauptbuttons klickt.

Aber die Geschichte mit den Untermenüs im Untermenü kriege ich nicht hin. Ich dachte, dass es dasselbe Prinzip wär, nämlich "Beim Onmouseover auf den Hauptbutton öffne das 1. Untermenü, bei Onmouseout starte einen Timer, der das Untermenü schließt. ." Beim Onmouseover auf einen Eintrag im Untermenü soll sich dann aber das Unteruntermenü aufklappen. Wenn man von dem Eintrag weggeht soll es sich wieder schließen. Aber nicht das ganze Menü sondern nur das Unteruntermenü.

Versteht ihr was ich meine?
Habe mal ein Bild von meinem Plan angehängt...
 

Anhänge

  • menü.jpg
    menü.jpg
    15,2 KB · Aufrufe: 131
Du solltest mal zeigen, wie Du ein-/ausschaltest.

Ich würde mehrere ineinander geschachtelte div-Container nehmen bei denen ich jeweils die Klasse ändern würde class="sichtbar" class="unsichtbar"
in einer css-Definition würde dann stehen

.sichtbar { display:block }
.unsichtbar {display:none}

vop
 
vop hat gesagt.:
Du solltest mal zeigen, wie Du ein-/ausschaltest.

Ich würde mehrere ineinander geschachtelte div-Container nehmen bei denen ich jeweils die Klasse ändern würde class="sichtbar" class="unsichtbar"
in einer css-Definition würde dann stehen

.sichtbar { display:block }
.unsichtbar {display:none}

vop
Zum Vergrößern anklicken....

Ich schalte per Onmouseover-Event und einer Funktion, die das style = block oder none setzt, genau wie du. Hat es einen Vorteil, wennman das HTML (class="sichtbar" und "unsichtbar") ändert, anstatt es mit direktem Zuweisen von display zu tun?
 
Der Vorteil, wenn Du Klassen verwendest, die Du durch Änderung von className per Script umschalten kannst liegt darin, dass man z.B. die Darstellung später ändern kann.

Außerdem würde durch die Festlegung von

.sichtbar
.unsichtbar

in einer css-Datei diese Klasse für alle Tags (für die es sinnvoll ist) gültig sein.
Du könntest also bspw. auch eine Tabelle <table class="unsichtbar"> bzw. <table class="sichtbar"> genauso ein und ausblenden.

Es empfiehlt sich hier die Vergabe einer id für die Tags, damit Du sie leicht über document.getElementById ansprechen kannst.

vop
 
Ok, so klappt es jetzt im IE.
Warum bleibt das Menü aber im Firefox offen bzw. warum sieht es in Firefox und Netscape so blöd aus?

Hier der Javascript-Code..da ist auch noch Datum und Uhrzeit-Script mit drin.
Code: 
<script language="javascript">
		var untermenue_liste = new Array('um1','um2','um11','um12','um21','um22');
		var menue_name;
		var zeit;
		var i;

		function Schalte_Untermenue(menue_name) {
			Verstecke_Alle_Untermenues();
			Schalte_Timer_Aus();
			var d=document.getElementById(menue_name).style;
			d.display = 'block';
		}
		
		function Zeige_Untermenue(menue_name) {			
			Schalte_Timer_Aus();
			var d=document.getElementById(menue_name).style;
			d.display = 'block';
		}

		function Blende_Menue_Aus() {
			zeit = setTimeout('Verstecke_Alle_Untermenues()',800);
		}

		function Blende_Menu_Aus(menu) {
			Verstecke_Untermenue(menu);
		}

		function Verstecke_Untermenue(id) {			
			document.getElementById(id).style.display='none';
		}		

		function Verstecke_Alle_Untermenues() {
			for (i=0;i<untermenue_liste.length;i++) {
				document.getElementById(untermenue_liste[i]).style.display='none';
			}
		}
		

		function Schalte_Timer_Aus() {
			clearTimeout(zeit);
		}
	</script>
<script language="javascript">
<!--

function gib_heutiges_datum() {
	var datum = new Date();
	var tag = datum.getDate();
		tag = (tag < 10) ? "0"+tag : tag;
	var mon = datum.getMonth() + 1;
		mon = (mon < 10) ? "0"+mon : mon;
	var jhr = year4(datum.getYear());
	var datumstring = tag+"."+mon+"."+jhr;
	return datumstring;
}

function year4(year) {
	return ((year < 1000) ? year+1900 : year);
}

function uhrzeit() {
	var datum = new Date();
	var std = datum.getHours();
	std = (std < 10) ? "0"+std : std;
	var min = datum.getMinutes();
	min = (std < 10) ? "0"+min : min;
	var sek = datum.getSeconds();
	sek = (sek < 10) ? "0"+sek : sek;

	var uhrstring = std+":"+min+":"+sek;
	window.document.getElementById("uhr").innerHTML = uhrstring;
	window.setTimeout("uhrzeit();", 1000);
}

//-->
</script>

Hier der HTML-Code:
HTML: 
<body onLoad="uhrzeit();">

<div id="main">
	<h1>COMPUTER-SITE ;)</h1>
Hinweis: Bitte passen sie die Anzeigegröße des Dokumenteninhalts an. Klicken sie dazu in das Word-Dokument, halten sie anschließend die Strg-Taste gedrückt und drehen sie dabei am Mausrad.<p></p>
	<iframe src="Willkommen.doc" name="content" width="680" height="500" marginheight="10" marginwidth="10" align="center">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>




 </div>


<div id="list1" class="link-list">

	<span id="ueberschrift">.::THEMEN::.</span><br /><br />
	
	
<a title="Der Bereich Hardware" class="b" onMouseover="Schalte_Untermenue('um1')" onMouseout="Blende_Menue_Aus()" id="hardware" href="#" alt="">Hardware</a>
 <div id="um1" onMouseover="Schalte_Timer_Aus()" onMouseout="Blende_Menue_Aus()">	 
     
	 <div title="Alles rund um die Hardware eines Netzwerks - Also Kabelarten, Netzwerkgeräte, Stecker, Buchsen..." onMouseover="Zeige_Untermenue('um11')" onMouseout="Blende_Menu_Aus('um11')"><a href="#" class="unterlinks">1. Netzwerk</a>
		  	<div id="um11" onMouseout="Blende_Menu_Aus('um11')">
			<a title="Beschreibung von Bridges, Switchtes, Routern, Routing und Gateways" class="unter2links" href="Hardware/Netzwerkhardware.doc" target="content">Netzwerkhardware</a><br>
	
			</div>
     </div>
	 
	 <div title="Informationen über das Speichern von Daten jeglicher Art. Blueray, DVD, Festplatten, USB-Sticks..." onMouseover="Zeige_Untermenue('um12')" onMouseout="Blende_Menu_Aus('um12')"><a href="#" class="unterlinks">2. Storage</a>
		  	<div id="um12" onMouseout="Blende_Menu_Aus('um12')">
			<a title="Ausarbeitung über das neue Serial ATA und kurzer Vergleich der Geschwindigkeiten von PATA&SATA" class="unter2links" href="Hardware/Serial_ATA.doc" target="content">Serial ATA</a>
			</div>
     </div>
	 

</div>
		
		
		
<a title="Der Bereich Software" class="b" onMouseover="Schalte_Untermenue('um2')" onMouseout="Blende_Menue_Aus()" id="software" href="#" title="Hardware" alt="">Software</a>
 <div id="um2" onMouseover="Schalte_Timer_Aus()" onMouseout="Blende_Menue_Aus()">	 
     
	 <div title="Jegliche Arten von Software, die über das Netzwerk kommuniziert. Remote-Tools, Malware, Client-Server-Applikationen..." onMouseover="Zeige_Untermenue('um21')" onMouseout="Blende_Menu_Aus('um21')"><a href="#" class="unterlinks">1. Netzwerk</a>
		  	<div id="um21" onMouseout="Blende_Menu_Aus('um21')">
			<a title="Wie TCP, eines der wichtigsten Protokolle des Internet, funktioniert..." class="unter2links"  href="Software/Netzwerk/TCPIP.doc" target="content">TCP</a><br>
			<a title="Portnummern und ihre Bedeutung im Netzwerk" class="unter2links"  href="Software/Netzwerk/Adressierung_durch_Portnummern.doc" target="content">Portnummern</a><br>
			<a title="Wozu braucht man überhaupt Protokolle bei einer Kommunikation?" class="unter2links"  href="Software/Netzwerk/Kommunikationsprotokolle.doc" target="content">Protokolle</a><br>
			<a title="Slottime und Round Trip Delay - Was es damit auf sich hat" class="unter2links" href="Software/Netzwerk/Slottime.doc" target="content">Slottime</a><br>
			</div>
     </div>
	 
	 <div title="Der große Bereich Datenbanken. Datenbankarten, Normalformen, DB2, MySQL usw." onMouseover="Zeige_Untermenue('um22')" onMouseout="Blende_Menu_Aus('um22')"><a href="#" class="unterlinks">2. Datenbanken</a>
		  	<div id="um22" onMouseout="Blende_Menu_Aus('um22')">
			<a title="Das kleine Programm QMF wird von VW verwendet. Kurzbeschreibung des Tools" class="unter2links" href="Software/Datenbanken/QMF_fuer_Windows.doc" target="content">QMF für Windows</a>
			</div>
     </div>
	 

</div>
</div>
	
	<div id="list2" class="link-list">
	<span id="ueberschrift">.::FUNKTIONEN::.</span><br /><br />
	<a class="b" id="drucken" href="#" title="NOCH NICHT IMPLEMENTIERT" alt="">Drucken</a>      
	<a class="b" id="abspeichern" href="#" title="NOCH NICHT IMPLEMENTIERT" alt="">Abspeichern</a>

<div id="kal">

<span id="uhr">uhr</span>
<script language="javascript">document.write("| "+gib_heutiges_datum());</script>

</div>

</body>
</html>


Hier noch das CSS :)
Code: 
body {
	font-family:Arial,Verdana,'sans serif';
	background-color:beige;
	}

#ueberschrift {
	font-size:12px;
	font-weight:bolder;
	letter-spacing:2px;
}

h1 {
	text-align:center;
}

a.b {
         overflow:hidden;
         font-family:arial;
         font-size:12px;
         display:block;
         width:120px;
         border:2px solid;
         color:#F0F8FF;
         padding:10px 0px;
         font-weight:bold;
         text-decoration:none;
	text-align:center;
         }

#hardware {
	background-color:#2E8B57;
	border-top-color:#7FFFD4;
         border-left-color:#7FFFD4;
         border-right-color:#008B8B;
         border-bottom-color:#008B8B;
}

#software {
	background-color:#CC0033;
	border-top-color:#FFCCCC;
         border-left-color:#FFCCCC;
         border-right-color:#E0666C;
         border-bottom-color:#E0666C;
}

#drucken {
	background-color:#333333;
	border-top-color:#CCCCCC;
         border-left-color:#CCCCCC;
         border-right-color:#999999;
         border-bottom-color:#999999;
}

#abspeichern {
		 background-color:#333333;
		 border-top-color:#CCCCCC;
         border-left-color:#CCCCCC;
         border-right-color:#999999;
         border-bottom-color:#999999;
}

a.b#hardware:hover {
         border-top-color:#008B8B;
         border-left-color:#008B8B;
         border-right-color:#7FFFD4;
         border-bottom-color:#7FFFD4;
		 }

a.b#software:hover {
         border-top-color:#E0666C;
         border-left-color:#E0666C;
         border-right-color:#FFCCCC;
         border-bottom-color:#FFCCCC;
		 }

a.b#drucken:hover {
         border-top-color:#999999;
         border-left-color:#999999;
         border-right-color:#CCCCCC;
         border-bottom-color:#CCCCCC;
		 }

a.b#abspeichern:hover {
         border-top-color:#999999;
         border-left-color:#999999;
         border-right-color:#CCCCCC;
         border-bottom-color:#CCCCCC;
		 }

#main {
        margin-left:8.2em;
        margin-right:8.2em;
        padding-left:1em;
        padding-right:1em;
        background-color:beige;
}


div.link-list {
        width:130px;
        position:absolute;
        background-color:black;
        top:0;
		text-align:center;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
		margin-right:0;
        height:100%;
		color:#FFF;
}


#list1 {
        left:0;
		border-right:2px dashed black;
		}

#list2 {
        right:0;
		border-left:2px dashed black;
        }

#kal {
		position:absolute;
		text-align:right;
		right:3px;
		bottom:3px;
		width:115px;
		height:15px;
		color:white;
		background:#444444;
		font-family:Arial;
		font-size:10px;
}

#um1,#um2,#um3,#um4 {
	display:none;
	
    width:120px;
    text-align:left;
	color:white;
	font-weight:bold;
}

#um1 {
    border:1px solid #008B8B;
	background-color:#2E8B57;
}

#um2 {
border:1px solid #E0666C;
	background-color:#CC0033;

}

#um11,#um12,#um21,#um22 {
	display:none;
	background-color:#CCD6E0;
    background-color:beige;
    width:110px;
    text-align:left;
	color:black;
	border:none;
}

.unterlinks {
	padding-left:10px;
	color:white;
	font-family:Arial;
	font-size:12px;
	width:100%;
}

.unterlinks:hover {
	background-color:black;
	color:white;
}

.unter2links {
	padding-left:15px;
	color:black;
	font-family:Arial;
	font-size:10px;
	text-decoration:none;
}

.unter2links:hover {
	color:red;
}
 
Naja, habe es jetzt auf jeden Fall für den IE hinbekommen. Wenn jemand das Ergebnis interessiert, einfach bescheid sagen :)
Sieht cool aus, oder?
 

Anhänge

  • test.gif
    test.gif
    4,1 KB · Aufrufe: 91
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück