Dropdown Panel Skript von Dynamic Drive. Beispiel eines jQuery-Dropdown Panels hier.

Zunächst müsst Ihr Euch die Skripte und Dateien von Dynamic Drive downloaden.

1) dddropdownpanel.css (CSS-Datei mit den Formaten der Darstellung)
2) dddropdownpanel.js (Javascript Datei zur Darstellung)
3) toggleright.gif (Bild rechte Abrundung des Reiters - weißer Hintergrund - eventuell Farbe anpassen)
4) toggleleft.gif (Bild linke Abrundung des Reiters - weißer Hintergrund - eventuell Farbe anpassen)
5) arrow-down.gif (Bild Pfeil nach unten für Reiter)
6) arrow-up.gif (Bild Pfeil nach oben für Reiter)

Ich habe mir nun einen Ordner

skripte

in meinem Stammverzeichnis angelegt und dort die Dateien 1 bis 4 hinein kopiert. Die beiden Pfeile
(5 und 6) gehören in den Ordner, in dem sich die Seite befindet, auf der Ihr dieses Skript einbaut.

Ich habe das Skript hier in meine “Home” (Startseite) eingebaut. Daher ist die relative Pfadangabe unten im Skript mit einem Punkt (./) zu dem Ordner “skripte”. Auf einer Unterseite müssten dort dann zwei Punkte (../) stehen, da diese ja ein Verzeichnis tiefer, im Ordner “html”, liegen würde.

Das Skript unten gehört dann in den “Head-Bereich” Eurer Seite.

> auf Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”

<link rel="stylesheet" type="text/css" href="./skripte/dddropdownpanel.css">
<script type="text/javascript" src="./skripte/dddropdownpanel.js">

/***********************************************
* DD Drop Down Panel- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Das Skript unten gehört in den “Body-Bereich” Eurer Seite. Dazu zieht Ihr Euch ein Textfeld auf und kopiert dieses Skript in die HTML des Textfeldes “vor dem Tag” (NOF 11 “Vorher”).

Natürlich müsst Ihr nun Euren Text und Eure Bilder und Hyperlinks in dem Skript anwenden, die Farben anpassen, usw. Hier könnte Ihr normale HTML-Befehle anwenden. Die Hintergrundfarbe und andere CSS Einstellungen nehmt Ihr in der Datei “dddropdownpanel.css” vor.

<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<p style="padding:10px">
<img src="./assets/images/stinktier.gif" class="closepanel" style="float:left; width:81px; height:112px; margin:0 10px 10px 0" /><span style="color:black"><b>Skunks</b> sind durch ihr kontrastreiches Fell gekennzeichnet. Die Grundfarbe ist schwarz oder dunkelbraun, das Gesicht, der Rumpf und auch der Schwanz sind mit weißen Streifen oder Flecken versehen. Der Rumpf ist langgestreckt und eher schlank, der Schwanz ist buschig und die Beine sind verhältnismäßig kurz.<br>Insbesondere die Vorderpfoten sind mit langen, gebogenen Krallen ausgestattet, die hervorragend zum Graben geeignet sind.<br>Die Schnauze ist bei den meisten Arten langgestreckt, Augen und Ohren sind relativ klein.<br>Ein charakteristisches Merkmal sind die ausgeprägten Analdrüsen, die ein streng riechendes Sekret  absondern, das bis zu 6 Meter weit versprüht werden kann. Das Sekret besteht hauptsächlich aus<br>(E)-2-Butenylmercaptan (C4H7SH), sowie aus 3-Methylbutanthiol und den entsprechenden S-Acetyl-Verbindungen. Es soll im Geruch einer Mischung aus Knoblauch, Schwefelkohlenstoff und angebranntem Gummi ähneln.<br>Skunks erreichen eine Kopfrumpflänge von 12 bis 51 Zentimetern, eine Schwanzlänge von 7 bis 41 Zentimeter und ein Gewicht von 0,2 bis 4,5 Kilogramm. Quelle:</span> <a href="http://de.wikipedia.org/wiki/Stinktier" target="_blank" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p><center><span style="color: #0000FF">Ein Klick auf einen Link oder auf das Stinktier-Bild wird dieses Panel automatisch schließen.</span></center></p>
<p><center><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" style="color: #FFFFFF" class="klein">Klick zu den Tutorials von Thomas Frei-Herrmann</a></center></p>
<br style="clear: left" />
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>klick</span></a>
</div>

nach oben