---
title: "Dock Menü Apple"
url: "https://www.typo3.net/d/88975-dock-menue-apple"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2009-04-18"
last_reply: "2009-04-21"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# Dock Menü Apple

TYPO3 › Menüs · 4 Antworten · gestartet 2009-04-18

## Eröffnungsbeitrag

**grisub** · 2009-04-18 · [Beitrag #1](https://www.typo3.net/d/88975-dock-menue-apple/1)

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

## Antworten

### [#2](https://www.typo3.net/d/88975-dock-menue-apple/2) · gstyleds · 2009-04-19

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:

```typoscript
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;
}

### [#3](https://www.typo3.net/d/88975-dock-menue-apple/3) · grisub · 2009-04-19

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.

```typoscript
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

```typoscript
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

### [#4](https://www.typo3.net/d/88975-dock-menue-apple/4) · gstyleds · 2009-04-21

Hi,
habe jetzt Dein Template nicht geprüft, aber eventuell hilft Dir der entsprechende Auszug aus meinem:

```html
<!-- ###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.

### [#5](https://www.typo3.net/d/88975-dock-menue-apple/5) · gstyleds · 2009-04-21

> **grisub schrieb:**
>
> es 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.

---

Quelle: „Dock Menü Apple“, typo3.net, https://www.typo3.net/d/88975-dock-menue-apple
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.