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