SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

TELEKOM

Animierte Menüs

Kompatibilität: Ms Internet Explorer, Netscape

Die Tatsache, dass Stile andere Seiteninhalte überdecken können, ist für Menüs von grossem Vorteil: So lassen sich aufklappbare Menüleisten programmieren, deren Unterpunkte nur dann zu sehen sind, und damit Platz auf der Seite beanspruchen, wenn der Benutzer auf die Menüpunkte klickt. Im folgenden entwerfen für eine Beispielanwendung für ein solches Menü. Als zusätzlicher Effekt "klappen" die Menüs nicht einfach auf, sondern "rollen" weich von oben herein.

Nach der üblichen HTML-Einleitung

<html><head><title>Rollmenue</title>

folgen wieder die entsprechenden Stil-Definitionen:

<style>

#essenmenu
{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#essen
{
position: absolute;
top: -120;
left: 0;
z-index: 0;
}

#trinkenmenu
{
position: absolute;
top: 0;
left: 60;
z-index: 1;
}

#trinken
{
position: absolute;
top: -92;
left: 60;
z-index: 0;
}

</style>

Wir haben vier verschiedene Stile definiert: Je einen für das Hauptmenü und je einen für das Untermenü. Die Lage, der "z-index" der Hauptmenüs ist dabei eine Ebene über den Untermenüs, so dass die Untermenüs von den Hauptmenüs überdeckt werden. Dann, noch im "<head>..</head"-Teil, folgen wieder die Javascript-Funktionen:

<script language="JavaScript">

var eypos=-124, ejump=-4;
var typos=-92, tjump=-4;

var delay=2;


function do_essen()
{
if(typos>-92)
{
tjump=-4;
if(typos>=30)
trinken_fahren();
}

ejump=-ejump;
if(eypos<=-122 || eypos>=30)
essen_fahren();
}

function essen_fahren()
{
if(document.layers) document.essen.top=eypos; else document.all.essen.style.top=eypos;
eypos+=ejump;

if(eypos>-122 && eypos<30)
setTimeout("essen_fahren()", delay);
}


function do_trinken()
{
if(eypos>-122)
{
ejump=-4;
if(eypos>=30)
essen_fahren();
}

tjump=-tjump;
if(typos<=-92 || typos>=30)
trinken_fahren();
}

function trinken_fahren()
{
if(document.layers) document.trinken.top=typos; else document.all.trinken.style.top=typos;
typos+=tjump;

if(typos>-92 && typos<30)
setTimeout("trinken_fahren()", delay);
}
</script>

</head>

Die Hauptfunktionen "do_essen()" und "do_trinken()" aktivieren erst die Funktionen, die die Bewegung ausführen, "essen_fahren()" und "trinken_fahren()". Die erste "if"-Abfrage testet dabei, ob vielleicht das andere Untermenü ausgefahren ist - da wir immer nur eines auf einmal sichtbar haben wollen, aktivieren wir die entsprechende Routine, die es zurückfahren lässt. Dann drehen wir vom eigenen Untermenü die Fahrtrichtung um -- wenn es nicht sichtbar ist, soll es ausfahren und wenn es ausgefahren ist, soll es zurückfahren. Da Javascript in der Lage ist, mehrere Funktionen gleichzeitig laufen zu lassen, müssen wir sicher gehen, dass die Fahr-Routine nicht schon läuft, sonst würden wir, wenn ein Benutzer mehrmals schnell hintereinander klickt, mehrmals die Funktion starten. Beim Zuweisen der Position müssen wir auf die beiden Browser-Typen testen und entsprechende Befehle verwenden.
Jetzt folgt der Rest der HTML-Seite:

<body link=ffffff>

<div id=essenmenu>
<table width=60 height=30 bgcolor=ff0000 cellspacing=0>
<tr><td align=middle><a href="javascript:do_essen()"><b>Essen</b></a>
</table>
</div>

<div id=trinkenmenu>
<table width=60 height=30 bgcolor=ff0000 cellspacing=0>
<tr><td align=middle><a href="javascript:do_trinken()"><b>Trinken</b></a>
</table>
</div>

<div id=essen>
<table bgcolor=ff8000 width=80 height=120 cellspacing=0>
<tr><td>Brot
<tr><td>Butter
<tr><td>Wurst
<tr><td>Käse
</table>
</div>

<div id=trinken>
<table bgcolor=ff8000 width=80 height=90 cellspacing=0>
<tr><td>Wasser
<tr><td>Bier
<tr><td>Limonade
</table>
</div>

Hier definieren wir der Reihe nach die beiden Hauptmenüs und dann die beiden Untermenüs. Da die Untermenüs zu Beginn eine negative Position (-92, resp. -122) haben, sind sie erstmal nicht zu sehen. Die Tabellen sind nur zur Verschönerung da, damit auch alle Einträge dieselbe Grösse haben. Dann kommt ganz normal der Inhalt der Seite:

<br><br>
<h2>Willkommen im Wirtshaus zum Eber.</h2>
Bitte wählen Sie aus unserem reichhaltigen Menü die Speisen und Getränke, mit denen wir Ihren Gaumen verwöhnen dürfen. Unser freundliches Personal wird Ihnen sogleich jeden Ihrer Wünsche erfüllen.

</body>
</html>

Zuerst lassen wir 2 Zeilen für das Menü frei. Der nun folgende Text ist ganz normaler HTML-Text. Das Schöne ist: Er wird zwar, wenn ein Menü ausgefahren ist, überlappt, aber ist danach wieder ganz normal sichtbar.

 

[ Das Beispiel zeigen ]

HTML Code für deine Website

[File ZIP runterladen, Bilder und andere Files sind im ZIP file inbegriffen]
DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere