
Verfasst von
Alice am 01.05.2007 - wurde schon
18360 mal gelesen
Schwierigkeit: mittel
Kommentare: [ 24 ]
keine ...
Sidemenu - Tutorial
Hier moechte ich euch zeigen,
wie ihr eine seitliche Navigation erstellen koennt.
Wie sowas aussieht, kann
hier betrachtet werden...
Ihr benoetigt dazu diese Zip-Datei
- klick -
Darin befinden sich 2 Dateien, einmal
ssm.js und
ssmItems.js,
beide steckt ihr nun in das selben Verzeichnis,
in der auch die Seite, auf der das SideMenu zu sehen sein soll, liegt.
In den Headbereich, also zwischen <head> und </head>,auf der Seite, auf der das SideMenu zu sehen sein soll, muss dieser Code ...
<script src="ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus,
http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit
http://www.dynamicdrive.com
</script>
<script SRC="ssmItems.js" language="JavaScript1.2"></script>
Kommen wir nun zur farblichen Gestaltung des Menus.
Oeffnet dazu die Datei
ssm.js.
Diese enthaelt enthält die sichtbaren Dinge des Menus.
Dieser Teil des Codes bestimmt die Groesse und die Ausrichtung des Menus:
YOffset=50; // Abstand zum oberen Rand des Browserfensters
XOffset=0; // Abstand zum linken Rand des Browserfenster
staticYOffset=30;
slideSpeed=20 // bestimmt die slice in Geschwindigkeit
waitTime=100; // legt die Anzeige dauer des Menus fest
menuBGColor="#4a113e"; // Rahmenfarbe des Menus
menuIsStatic="yes"; // gibt an ob sich das Menu mitbewegen soll oder nicht
menuWidth=150; // Zahl muss hoeher sein als 10!
menuCols=2;
Dieser Teil des Codes bestimmt die Farben des Menus:
hdrFontFamily="verdana";
//Schriftart des Menus
hdrFontSize="2";
//Schriftgroesse des Menus
hdrFontColor="#263959";
//Schriftfarbe des Menus
hdrBGColor="#55779A";
//Hintergrundfarbe des Menus
hdrAlign="center";
//Ausrichtung des MenuInhalts
hdrVAlign="center";
hdrHeight="15";
// Groesse der Menuspalten
linkFontFamily="Verdana"; //
Schriftart eines Links
linkFontSize="2";
// Schriftgroesse eines Links
linkBGColor="#A6BEDA"; //
Hintergrundfarbe eines Links
linkOverBGColor="#263959"; // Hintergrundfarbe Mousover
linkTarget="text";
// Link Target
linkAlign="right";
// Ausrichtung des Linktextes
barBGColor="#55779A";
// Hintergrundfarbe der Leiste
barFontFamily="Verdana";
// Schriftart der Leiste
barFontSize="2";
// Schriftgroesse der Leiste
barFontColor="#263959";
// Schriftfarbe der Leiste
barVAlign="center";
// Textausrichtung der Leiste
barWidth=20; // no quotes!! // Breite der
Leiste
barText="SIDE MENU";
// Text der auf der Leiste steht
// <img> tags werden unterstuetzt. Auf korrektes HTML achten.
Dieser Teil des Codes ist fuer die Links zustaendig
ssmItems[0]=["Beispielseiten"] // header
ssmItems[1]=["Beispiel 1", "beispiel1.html", ""]
ssmItems[2]=["Beispiel 2", "beispiel2.html",""]
ssmItems[3]=["Beispiel 3", "beispiel3.html", ""]
ssmItems[4]=["Beispiel 4", "beispiel4.html", ""]
ssmItems[5]=["Beispiel 5", "beispiel5.html", ""]
ssmItems[6]=["Beispiel 6", "beispiel6.html", ""]
ssmItems[7]=["Beispiel 7", "beispiel7.html", ""]
ssmItems[8]=["Beispiel 8", "beispiel8.html", ""]
ssmItems[9]=["Beispiel 9", "beispiel9.html", ""]
ssmItems[10]=["Meine Homepages"] // header
ssmItems[11]=["Alice-Grafixx.de", "http://www.alice-grafixx.de", "_blank"]
ssmItems[12]=["Design-Grafixx", "http://www.design-grafixx.com", "_blank"]
ssmItems[13]=["WordpressThemes", "http://www.design-grafixx.com", "_blank"]
ssmItems[14]=["Kontakt", "http://seite.de/formmailer.php", "", 1, "no"]
ssmItems[15]=["Email", "mailto:
email@gemuese.de", "",1]
Erklaerungen zu den Links
ssmItems[X]=["Name des Links", "http://www.deineSeite.de", "_blank"]
ssmItems = der Menupunkt
[X] = die Nummer des Menupunktes
"Name des Links" = der Linkname
"http://www.deineSeite.de" = der Url des Links
"_blank" = das Traget
Quelle: DynamicDrive
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...