JavaScript - DropDownMenue
1. Vorwort
2. Script
3. Erklärung
4. Schlusswort
1. Vorwort
moinmoin, in diesem Tutorial will ich euch mal wieder was beibringen :). Hier zeige ich euch also wie man ein aufklappmenü menü macht(es klappt nach unten auf) also viel spaß beim lesen :P
2. Script
<html>
<head>
<title>JavaScript - DropDownMenue</title>
<script language="JavaScript">
// Funktion zum anzeigen des Menüs
function zeigeLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "visible";
}
// Funktion zum verstecken des Menüs
function verbergeLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "hidden";
}
</script>
<style type="text/css">
a { font-family: Arial, Helvetica, sans-serif;
color: #ffffff; margin-left: 3px}
</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<table border="0" bgcolor="#000000" cellspacing="0" cellpadding="2">
<tr>
<td width="100"><a href="#">Link#0</a></td>
<td width="100">
<div id="ResLayer"
style="position:absolute; left:115px; top:30px;
width:100px; height:62px; z-index:1;
background-color:#cccccc; layer-background-color:#cccccc;
visibility:hidden">
<a href="#">Link#1.0</a><br>
<a href="#">Link#1.1</a><br>
<a href="#">Link#1.2</a><br>
</div>
<a href="#" onClick="zeigeLayer('ResLayer');"
onDblClick="verbergeLayer('ResLayer');">Link#1</a>
</td>
<td width="100">
<div id="LinksLayer"
style="position:absolute; left:217px; top:30px;
width:100px; height:85px; z-index:2;
background-color:#cccccc; layer-background-color:#cccccc;
visibility:hidden">
<a href="#">Link#2.0</a><br>
<a href="#">Link#2.1</a><br>
<a href="#">Link#2.2</a><br>
<a href="#">Link#2.3</a><br>
</div>
<a href="#" onClick="zeigeLayer('LinksLayer');"
onDblClick="verbergeLayer('LinksLayer');">Link#2</a>
</td>
</tr>
</table>
</body>
</html>
3. Erklärung
3.1 der anfang vom dokument:
<html>
<head>
<title>JavaScript - Drop Down Menüs</title>
...
</head>
<body bgcolor="#ffffff" text="#000000">
der typische anfang/schluss eines dokuments, gibts also nicht viel dazu zu sagen! aber wenn du willst dass dein menü einen abstand vom browser hat dan gib das noch in den body mit ein:
topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"
also:
<body bgcolor="#ffffff" text="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
3.2 was zwischen <head> und </head> steht:
<script language="JavaScript">
// Funktion zum anzeigen des Menüs
function zeigeLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "visible";
}
// Funktion zum verstecken des Menüs
function verbergeLayer(layerid) {
var layer = document.getElementById(layerid);
layer.style.visibility = "hidden";
}
</script>
<style type="text/css">
a { font-family: Arial, Helvetica, sans-serif;
color: #ffffff; margin-left: 3px}
</style>
3.2.1 "visible" und "hidden" sind für später wichtig fürs anzeigen des menüs(wenn du das visible/hidden in erscheinen/verstecken umänderst musst du das dann später im code auch nochmal)
3.2.2 font-family: Arial, Helvetica, sans-serif; stellt die schrift auf arial bzw. helvetica bzw. sans-serif
3.2.3 color: #ffffff; margin-left: 3px} macht die schriftfarbe auf weiß und den abstand zwichen dem linken rand und schrift auf 3 pixel
3.3 nun zu der tabelle:
<table border="0" bgcolor="#000000" cellspacing="0" cellpadding="2">
<tr>
<td width="100"><a href="#">Home</a></td>
<td width="100">
...
...
</td>
</tr>
</table>
3.3.1 <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="2"> ... </table> erschafft/schließt eine neue tabelle deren hintergrund schwarz ist
3.3.2 <tr> ... </tr> erschafft/schließt eine neue zeile in der bereits bestehenden tabelle
3.3.3 <td width="100"> ... </td> erschafft/schließt eine neue Zelle in der bereits bestehenden zeile deren breite 100 pixel sind
3.4 zu dem teil der oben als ... dargestellt wird:
<div id="ResLayer"
style="position:absolute; left:115px; top:30px;
width:100px; height:62px; z-index:1;
background-color:#cccccc; layer-background-color:#cccccc;
visibility:hidden">
<a href="#">Scripten</a><br>
<a href="#">Referenz</a><br>
<a href="#">Weblog</a><br>
</div>
<a href="#" onClick="zeigeLayer('ResLayer');"
onDblClick="verbergeLayer('ResLayer');">Link#2</a>
alsooo, jetzt kommt die formatierung von dem aufklappenden menü
3.4.1 position:absolute; left:115px; top:30px; gibt also an wieviel von links/oben der abstand des erscheinenden sein soll, du kannst das menü also auch irgendwo anders erscheinen lassen, z.b. rechts unten oder in der mitte
3.4.2 width:100px; height:62px; z-index:1; gibt an wie breit/hoch das erscheinende menü sein soll, und auch noch welche indexnummer es hat
3.4.3 background-color:#cccccc; layer-background-color:#cccccc; gibt an was für einen hintergrund das menü haben soll, aber bei dem layer-background-color:#cccccc; sollte sich eigentlich auch was verändern wenn man es ändert... tut es aber irgendwie nicht, kann man also weglassen, ich habs jetz mal da gelassen, könnt sein dass es am opera liegt... glaub ich aber eigentlich nicht
3.4.4 visibility:hidden"> gibt an ob das menü beim laden der seite schon gezeigt werden soll oder nicht, wenn nein dann hidden schreiben wenn ja dann visible schreiben
3.4.5 <a href="#">Scripten</a><br>
<a href="#">Referenz</a><br>
<a href="#">Weblog</a><br>
das erstellt dann je einen link der in eine neue zeile kommt(durch das <br>), kann man also noch hinzufügen oder löschen
3.4.6 </div> wird also die formatierung abgeschlossen
3.4.7 <a href="#" onClick="zeigeLayer('ResLayer');"
onDblClick="verbergeLayer('ResLayer');">Link#2</a>
hier wird dann gesagt bei einem klick soll es geöffnet werden bei doppelklick wird es geschlossen
das kann alles so oft wie gewollt wiederholt werden, hier sind es halt nur zwei menüs, du kannst aber auch von mir aus 7 oder so machen.
4. Schlusswort:
Ich hoffe es hat euch was gebracht und ihr könnt was damit anfangen.
Copyright by WolfOfNightmare alias BlackSatan alias BloodySnow alias Meisterassassin alias TheDancingzebra