Nightfire Java Archiv - Tutorials

[]

Es ist erstaunlich, mit wie wenig Code man ein einfaches Treemenu erstellen kann.

Werfen wir einmal einen Blick auf das Script:

function doMenu(id,display) {
document.getElementById(id).style.display = display;
}

Thats it, das ganze Script!

Wenn wir nach dem W3C DOM vorgehen, sind wir in der luxuriösen Lage, jedes Element innerhalb einer Seite nach seiner ID zu identifizieren. Gewappnet mit diesem Wissen, kann ein Entwickler die document.getElementById() Methode anwenden und spezifische IDs ansprechen.

Das Script arbeitet, indem es zwei Argumente konstruiert, die später über einen EventHandler identifiziert werden. Die zwei Argumente sind id und display. Display ist ein CSS Attribut, welches verwendet werden kann, um Elemente in einer Seite anzuzeigen oder zu verstecken.

Um das Script aufzurufen, verwendet man etwa die folgende Zeile:

Das block Attribut wird verwendet, um die SubMenus anzuzeigen und none, um sie zu verstecken.

Was als nächstes getan werden muss, ist das Setzen der Initialwerte für die Submenus auf display:none, was wir über eine CSS- Deklaration lösen:

.sub {
display: none;
color: white;
text decoration: none;
}

Indem wir die Klasse den SubMenus zuordnen, bleiben sie solange versteckt, bis sie über einen Event angezeigt werden. Wiklich einfach, nicht?

Hier ist der komplette Code eines Beispielmenus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tree Menu</title>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
<style type="text/css">
.menu {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #333366;
text-decoration: none;
}

.sub {
display: none;
color: white;
text decoration: none;
}
</style>
</head>
<body>
<div id="menuLayer" style="position: absolute; left: 30px; top: 50px; width: 200px; height: 600px; z-index: 3; visibility: visible">
<a href="#" onmousedown="doMenu('menu1sub','block');doMenu('menu2sub','none');doMenu('menu3sub','none');doMenu('menu4sub','none')">
Menu 1</a>

<a href="#" >Link 1</a> 
<a href="#">Link 2 </a> 
<a href="#">Link 3</a> 
<a href="#">Link 4 </a>

Yep, und hier gibts ein Beispiel zum Ansehen