Loading...   Upload Image

SidemenuTutorials » JavaScript Tutorials » Sidemenu

Verfasst von Alice am 01.05.2007 - wurde schon 17226 mal gelesen

Kategorie: JavaScript
Bewertung:
22x bewertet
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

Kommentar schreibenHinterlasse einen Kommentar

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 ...


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider