Hallo Leute!
Ich möchte auf meiner seite ein CSS Dock Menü einbauen!
Die Files bekommt man(n) hier!
http://www.ndesign-studio.com/blog/mac/css-dock-menu
Die css und JS files habe ich schon eingebaut und werden auch schon geladen!
Ich hänge jetzt beim TS wie ich das Menü in meinen MARKER bringe.
Die bilder möchte ich über MEDIA der einzelnen Seiten laden.
Kann mir jemand einen tip geben ?
Danke
Hi grisub,
ich habe dieses Dock unter http://www.sackmann-pm.de im Einsatz und mich auch unzählige Nächte damit rumgeschlagen. Das zugehörige TS-Template sieht bei mir so aus:
tmp.DOCK = HMENU
tmp.DOCK {
entryLevel = 1
special = directory
special.value = 15
1 = TMENU
1 {
disableAltText = 1
noBlur = 1
NO {
doNotShowLink = 1
before.cObject = COA
before.cObject {
10 = TEXT
10.value = <a class="dock-item" href="index.php?id=
12 = TEXT
12.field = uid
14 = TEXT
14.value = ">
20 = TEXT
20.value = <img src="
22 = IMG_RESOURCE
22 {
file.import=uploads/media/
file.import.listNum = 0
file.import.override.field = media
}
24 = TEXT
24.value = " title="
26 = IMG_RESOURCE.titleText = TEXT
26 = IMG_RESOURCE.titleText.field = description
28 = TEXT
28.value = " />
30 = TEXT
30.value = <span>
32 = TEXT
32.field = title
34 = TEXT
34.value = </span></a>
}
}
}
}
Ich habe zuvor zig kürzerer, scheinbar elegantere Lösungen versucht, aber letztendlich gings nur „quick & dirty“ über das Zusammenfrickeln meines notwenigen Links per TEXT-Bausteinen.
Und mein zugehöriges CSS mit einigen hilfreichen Kommentaren:
*, body {padding:0; margin:0;}
img {border:none;}
#ausrichtung-dock { /* Ist automatisch 1000px breit */
height:100px;
overflow:hidden;
}
.dock { /* Die gesamte Zeile inklusive dem eigentlichen Dock */
width:900px; /* Dock wird mittig zentriert */
height:60px;
}
.dock-container { /* Das <div> direkt ums Dock selbst */
position: relative; /* Wichtig für die Javascript-Funktionalität */
}
a.dock-item { /* Tex-Links bei Mouse-over */
display: block;
color:#FFF; /* Link-Text */
position: absolute;
margin-top:5px; /* Abstand der Icons oben */
text-align: center;
text-decoration: none;
font: bold 12px Helvetica, Arial, sans-serif;
}
.dock-item img {
margin-top: 25px; /* Exakte Platzierung der Icons */
width: 100%;
}
.dock-item span { /* Text-Link Hintergrund bei Mouse-Over */
position:relative;
margin:11px 0 0 -34px; /* Exakte Platzierung der Linktexte / Wert:links wichtig für Zentrierung (itemWidth im Javascript) */
width:120px; /* Ausreichend Platz für die Linktexte */
display: none;
text-align:center;
}
hi gstyleds!
danke für deine ausführliche beschreibung deines menüs.
leider bekomme ich das ding nicht zum laufen.
das js binde ich folgendermassen ein.
includeJS.file10 = fileadmin/java/jquery.js
includeJS.file11 = fileadmin/java/interface.js
includeJS.file12 = fileadmin/java/dockparameter.js
diese werden auch geladen!
die css habe ich in meine css eingebunden
stylesheet = fileadmin/css/test.css
der abschnitt in meinem template sieht so aus
<td width="75" align="left" valign="top"><img src="fileadmin/bilder_site/1x1px.gif" width="1" height="40" /></td>
<td id="dock" class="dock" align="center" valign="middle"><div id="ausrichtung-dock">
<div class="dock" id="dock">
<div class="dock-container">###MENUE###</div>
</div>
</div></td>
es erscheinen zwar meine Bilder ABER diese sind alle übereinander gelegt und der effekt vom Dock ist auch nicht ersichtlich
habe ich da einen denkfehler oder an was kann das noch liegen ??
Danke
Hi,
habe jetzt Dein Template nicht geprüft, aber eventuell hilft Dir der entsprechende Auszug aus meinem:
<!-- ###DOKUMENT### begin -->
<div id="damn-ie_hack-container">
<div id="hg-oben-rechts"><img "irgendein-hintergrund-bild"></div>
<div id="container"> <!-- Bestimmt die Breite der eigentlichen Webseite -->
<div id="ausrichtung-dock">
<div class="dock" id="dock">
<div class="dock-container">
###DOCK###
</div>
</div>
</div> <!-- Ende ausrichtung-dock -->
Die Zeile 8 ist wichtig, wegen der Klasse und der ID.
grisub schriebes erscheinen zwar meine Bilder ABER diese sind alle übereinander gelegt und der effekt vom Dock ist auch nicht ersichtlich
Hast Du noch weitere JS geladen? Es gibt bei dem Dock Konflikte mit anderen Bibliotheken, z.B. zwischen jQuery und Prototype. Ich hatte auf einer Seite neben den Dock noch den kiwi_slider eingebaut, da gab es dasselbe Phänomen übereinander liegender Dock-Fotos ohne Zoom-Effekt.
Wenn ja, deaktiviere mal alle anderen JS und teste noch mal.