---
title: "Menüdesign"
url: "https://www.typo3.net/d/49958-menuedesign"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-09-14"
last_reply: "2006-10-05"
replies: 12
solved: false
page: 1
pages: 1
lang: "de"
---

# Menüdesign

TYPO3 › Menüs · 12 Antworten · gestartet 2006-09-14

## Eröffnungsbeitrag

**zarah** · 2006-09-14 · [Beitrag #1](https://www.typo3.net/d/49958-menuedesign/1)

Habe unter

www.lichterfeld-koeln.de/

ein nett verspieltes menü entdeckt, kann man so etwas auch in typo3 zeigen??

grüße
zarah

## Antworten

### [#2](https://www.typo3.net/d/49958-menuedesign/2) · Unbekannter Benutzer · 2006-09-14

Meinst du die zwei Punkte links? Das ist doch mit ein bisschen CSS kein Problem...

Gruß

Christian

### [#3](https://www.typo3.net/d/49958-menuedesign/3) · toyde · 2006-09-15

Ja, ist möglich.

Hat insofern nichts mit TYPO3 zu tun. Verlinkte Navigation ist über Bild-Dateien und JavaScript gelöst. Mit HTML/CSS-Verständnis bekommst Du das auch einfacher hin. Baue es lokal über CSS nach, und passe es entsprechend für/mit TypoScript an.

grüsse

### [#4](https://www.typo3.net/d/49958-menuedesign/4) · zarah · 2006-09-29

Hallo!

Habe nun mein Menü per CSS nachgebaut.
Aber wie kann ich das nun mit Typo3 anpsrechen???

Meine CSS Datei:

```html
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
ul a {
  display: block;
  text-indent: -9999px;
  height: 10px; /* halb so hoch wie die Link-Bilder, damit nur die obere Seite dargestellt wird */
  width: 75px; /* so breit wie die Link-Bilder */
}
.home a {background: url(images/home.gif);}
.mehr a {background: url(images/mehr.gif);}
.tageskarte a {background: url(images/tageskarte.gif);}
ul a:hover {background-position:bottom-left;}
```

Viele Grüße
Zarah

### [#5](https://www.typo3.net/d/49958-menuedesign/5) · toyde · 2006-09-29

Über dein CSS würd ich nochmals drüber. Hyperlinks haben über CSS 4 Zustände (a:link, a:visited, a:hover, a:active). Wenn dies ergänzt ist, dann such im Forum nach "listenmenu typoscript". Wie Du ul/li-Listen mit TypoScript umsetzt wirst Du in mehreren Snippets antreffen.
z.B. [/d/37484-listenmenu-mit-hintergrund-und-linien](https://www.typo3.net/d/37484-listenmenu-mit-hintergrund-und-linien)

grüsse

### [#6](https://www.typo3.net/d/49958-menuedesign/6) · zarah · 2006-10-02

danke

jetzt hab ich es nochmal geändert

und nun klappt zumindest der teil das mit dem darübergehen des cursors die anzeige blinkt, nur leider geht es dann wieder auf die ausgangsposition zurück und nicht in die 2 position. hängt das mit typoscript zusammen?

```html
.home a {background: url(images/home.gif) 0px 0px no-repeat;} 
.home a:hover {background-position: 0px -10px;} 
.home a:active {background-position: 0px -10px;}


.mehr a {background: url(images/mehr.gif) 0px 0px no-repeat;}
.mehr a:hover {background-position: 0px -10px;} 
.mehr a:active {background-position: 0px -10px;}
  

.tageskarte a {background: url(images/tageskarte.gif) 0px 0px no-repeat;}
.tageskarte a:hover {background-position: 0px -10px;} 
.tageskarte a:active {background-position: 0px -10px;}
```

### [#7](https://www.typo3.net/d/49958-menuedesign/7) · zarah · 2006-10-03

Könnte es sein, das ich in typoscript noch ein paar dinge definieren muß, damit mein css menü voll funktionsfähig ist?
Irgendwie wird der aktivierte Zustand nicht akzeptiert.
Da springt das Menü wieder auf die Ausgangsposition zurück?????
Grüße

### [#8](https://www.typo3.net/d/49958-menuedesign/8) · toyde · 2006-10-03

Poste mal dein jetziges Menu-TypoScript und den HTML-Teil aus deinem Problem-Frontend. Zustände sind CSS-Sache. Falls aber die Funktion "spinnt", dann ist HTML/TypoScript schuld.

grüsse

### [#9](https://www.typo3.net/d/49958-menuedesign/9) · zarah · 2006-10-03

Ahh-stelle gerade fest, das ich in typosript kein wirksames Menü definiert habe.
Gibt es irgendwo einen Schnipsel, in dem CSS Menüs angesprochen werden?

Das wäre sehr angenehm:
Grüße
Zarah

### [#10](https://www.typo3.net/d/49958-menuedesign/10) · toyde · 2006-10-04

> Ahh-stelle gerade fest, das ich in typosript kein wirksames Menü definiert habe.
> Gibt es irgendwo einen Schnipsel, in dem CSS Menüs angesprochen werden?

"kein wirksames Menü definiert habe" kann ich nicht ganz nachvollziehen. In erwähntem Post stehen die Configs drin.

> **toyde schrieb:**
>
> Wie Du ul/li-Listen mit TypoScript umsetzt wirst Du in mehreren Snippets antreffen.
> z.B. [/d/37484-listenmenu-mit-hintergrund-und-linien](https://www.typo3.net/d/37484-listenmenu-mit-hintergrund-und-linien)

grüsse

### [#11](https://www.typo3.net/d/49958-menuedesign/11) · zarah · 2006-10-05

Vielen Dank - allerding tue ich mich immer noch etwas schwer
habe jetzt folgendens in typoscript

```typoscript
 page.10.marks.MENU = HMENU
     page.10.marks.MENU = TMENU
     page.10.marks.MENU.1.NO {
     allWrap = <span class="ul">|</span> |*| <spanclass="ul a">|</span>|
     allWrap.override.cObject=COA
     allWrap.override.cObject{
     if.equals.data=register:count_HMENU_MENUOBJ
     if.value.data=register:count_menuItems
     10=TEXT
     10{
      value=<span class="ul a">|</span>
if.isFalse.prioriCalc=1
if.isFalse.cObject=TEXT
if.isFalse.cObject.insertData=1
if.isFalse.cObject.value={register:count_HMENU_MENUOBJ}%2
}
20<.10
20.if.negate=1
20.value=<span class="ul a">|</span>
}
}
}
```

und weiß nicht genau an welcher Stelle ich in meiner HTML Datei das ###MENU###
einfüge

```html
<p><ul>
<li class="home"><a href="index.php?id=49">Home</a></li>
<li class="mehr"><a href="index.php?id=61">mehr</a></li>
<li class="tageskarte"><a href="index.php?id=60">Tageskarte</a></li>
</ul>
```

oder etwa in die css datei????

Grüße

### [#12](https://www.typo3.net/d/49958-menuedesign/12) · toyde · 2006-10-05

Wenn Du nicht ganz weisst, was Marks/Subparts sind, dann am besten nachlesen ;) . Z.B. PDF herunterladen:
» <http://www.typo3.net/literatur_zu_typo3/>

In's CSS kommt natürlich kein HTML rein, sondern CSS. ###MENU### in's HTML-Template, dort wo es auftauchen soll. Der Navigationscode ersetzt dann diesen Marker. Lies Dir die Kapitel durch, und gut is.

Genereller Tipp:

```typoscript
allWrap = <span class="ul">|</span> |*| <spanclass="ul a">|</span>|
```

Falls das ein optionSplit sein soll, lies Dich auch darin ein. Oder such im Forum, damit Du Statements von anderen Benutzern nachvollziehen kannst.
Ich glaube, Du kopierst Dir noch zu viel zusammen, das nicht 100%-ig verstanden wird. Ausserdem: *"spanclass = ul a"* zeigt einfach auf, dass hier nicht zu Ende gedacht wird.

grüsse

### [#13](https://www.typo3.net/d/49958-menuedesign/13) · zarah · 2006-10-05

Okay - hast natürlich recht. Habe zu diesem CSS Menüzeugs bis jetzt noch nicht so viel gerafft. Lerne wohl langsam, aber stetig...

Hier ist jetzt schon mal der HTML Code...

```html
      <p><ul><strong>###MENU###
<li class="home"><a href="index.php?id=49">Home</a></li>
<li class="mehr"><a href="index.php?id=61">mehr</a></li>
<li class="tageskarte"><a href="index.php?id=60">Tageskarte</a></li>
###MENU###</strong></ul>
```

Das müßte es doch theoretisch sein, oder?

---

Quelle: „Menüdesign“, typo3.net, https://www.typo3.net/d/49958-menuedesign
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.