Teil 1 Teil 2
Reisebericht Bolivien Kurzübersicht Bolivien ausführlich

Anleitung Menü Dropdown Tabs Teil1

Auf der Webseite

http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

wird ein Drop-Down-Menü in 5 verschienen Varianten angeboten. Ich erkläre hier, wie man dieses Menü in ein eigenes Design (als 1-Frame-Design) bei NPage einbaut.

Als Beispiel wird die Variante glowtabs (Variante 4 in der Muster HTML-Seite) gewählt.

Schritt 1 Vorbereitung

Dateien herunterladen, auf Festplatte speichern und entpacken.

Im Paket enthalten sind

dropdowntabsdemo.htm

Das ist nur eine Demodatei. Diese datei muss nicht bei NPage hochgeladen werden. Interessant ist höchsten der Quellcode dieser Datei.

dropdowntabs.js

Diese Datei muss in jedem fall bei NPage hochgeladen werden, egal welche Variante gewählt wird

Grafikdateien

Zu den einzelnen Varianten gehören:

ddcolortabs color_tabs_left.gif und color_tabs_right.gif

bluetabs bluetab.gif und bluetabactive.gif

slidetabsmenu slide-left.gif und slide-right.gif

glowingtabs glowtab.gif und glowtab-left.gif

halfmoon nur halfmoontab.gif

Die entsprechende(n) Datei(en) muss/müssen hochgeladen werden.

CSS-Dateien

ddcolortabs ddcolortabs.css

bluetabs bluetabs.css

slidetabsmenu slidingdoors.css

glowingtabs glowtabs.css

halfmoon halfmoontabs.css

Es muss nur eine dieser Dateien hochgeladen werden. Diese ist jedoch vorher anzupassen.

Schritt 2 Anpassung der CSS-Datei

Die Anpasung muss an folgenden Stellen erfolgen:

Alter Code:

.glowingtabs a{
float:left;
background:url(media/glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}

.glowingtabs a span{
float:left;
display:block;
background:url(media/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight:bold;
color:#3B3B3B;
}

Neuer Code

.glowingtabs a{
float:left;
background:url(https://file1.hpage.com/001581/42/bilder/glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}

.glowingtabs a span{
float:left;
display:block;
background:url(https://file1.hpage.com/001581/42/bilder/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight:bold;
color:#3B3B3B;
}

Die Veränderungen sind fett dargestellt. Die rot und fett dargestellten Ziffern sind bei jedem NPage-Nutzer anders. Die genaue URL erhält man, wenn man nach dem Hochladen der Bilder auf ein Bild klickt.

Zur Anleitung Menü Dropdown Tabs Teil2