---
title: "Menüs basierend auf CSS"
url: "https://www.typo3.net/d/39055-menues-basierend-auf-css"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-03-07"
last_reply: "2006-11-16"
replies: 136
solved: false
page: 1
pages: 2
lang: "de"
---

# Menüs basierend auf CSS (Seite 1 von 2)

TYPO3 › Menüs · 136 Antworten · gestartet 2006-03-07

## Eröffnungsbeitrag

**just2b** · 2006-03-07 · [Beitrag #1](https://www.typo3.net/d/39055-menues-basierend-auf-css/1)

Hallo,

ich hab mir zum Ziel gesetzt, TMENU_LAYERS zu ersetzen und rausgekommen sind diese (Listen-)Menüs. Sie sind jeweils valide nach CSS2 und XHTML 1.1 und können mit mehreren Ebenen umgehen

**horizontal:**
[Bild: just2b.com/…/horizontal.gif](http://just2b.com/uploads/pics/horizontal.gif)
*Beispiele*
[Nr. 1](http://just2b.com/index.php?id=1013) &  [Nr. 2](http://just2b.com/index.php?id=852)

**vertikal:**
[Bild: just2b.com/…/vertikal.gif](http://just2b.com/uploads/pics/vertikal.gif)

*Beispiel*
[Nr. 1](http://just2b.com/index.php?id=850)

**TS/CSS/JS-Code gibts hierfür natürlich auch:**
[horizontal](http://just2b.com/fileadmin/ringergeorg/div/horizontal.zip)
[vertikal](http://just2b.com/fileadmin/ringergeorg/div/vertikal.zip)

JS wird zB so eingebunden:

```typoscript
page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/xxxxx.js"></script>
}
```

Ich hoffe das ganze ist vollständig!

Lob/Kritik/Anregungen natürlich erwünscht
Georg
PS: das reine CSS-Menü ist nicht von mir sondern nur die Umsetzung damit es für TYPO3 geeignet ist
PPS: Bei Verwendung hört man ein 'Danke' gern.

## Antworten (#2 bis #100)

### [#2](https://www.typo3.net/d/39055-menues-basierend-auf-css/2) · steffenk · 2006-03-07

Wow !

Das ist aber lieb von Dir Georg - so schön aufbereitet, das man nur noch zubeissen muss  :D

Es ist doch immer wieder schön zu sehen, das es einige User wie Dich gibt, die bereitwillig ihr Wissen mit den anderen teilen - und das auf so vorbildliche Art und Weise !

1000 Dank !

### [#3](https://www.typo3.net/d/39055-menues-basierend-auf-css/3) · woida · 2006-03-07

Können eigentlich auch normale Nutzer das [HowTo] so in blau dargestellt bekommen?

### [#4](https://www.typo3.net/d/39055-menues-basierend-auf-css/4) · just2b · 2006-03-07

> **woida schrieb:**
>
> Können eigentlich auch normale Nutzer das [HowTo] so in blau dargestellt bekommen?

nein, prefixe können nur Moderatoren/Admins vergeben. (auf anfrage mach ichs gern)

### [#5](https://www.typo3.net/d/39055-menues-basierend-auf-css/5) · markus.​l · 2006-03-07

Mega großes LOB!

Danke Dir für das tolle Beispiel. Ich ärgere mich nämlich auch seit ein paar Tagen über den Berg an Java Script Code welchen TMENU_Layers in die Seiten haut.

Tolle Sache von Dir, dank solcher Beiträge engagiert man sich noch lieber in so einem Forum.

Viele Grüße

Markus

### [#6](https://www.typo3.net/d/39055-menues-basierend-auf-css/6) · just2b · 2006-03-07

> **markus.l schrieb:**
>
> Mega großes LOB!

Danke! :)
So heute Abend ist dazugekommen: vertikales Menü mit GMENU in 1. Ebene
[Bild: g.gosaunet.at/…/vertikal_GMENU.gif](http://g.gosaunet.at/uploads/pics/vertikal_GMENU.gif)

lg georg

### [#7](https://www.typo3.net/d/39055-menues-basierend-auf-css/7) · stephi · 2006-03-08

tolle sache, danke für das how to! ich hoffe, ich komm bald mal dazu, es auszuprobieren!

### [#8](https://www.typo3.net/d/39055-menues-basierend-auf-css/8) · fantriXx · 2006-03-08

Hi,

ich würde dieses Menü auch gerne in meiner Seiter einbauen nur weiss ich leider nicht :( Wäre nett wenn mir einer erklären kann wie man die Dateien:

vertikal_CSS.css
vertikal_JS.js

in meiner Seite einbinden kann ?

schon mal mal danke im voraus.

### [#9](https://www.typo3.net/d/39055-menues-basierend-auf-css/9) · just2b · 2006-03-08

mit  **LESEN**, im 1. Posting steht wie man JS einbinden und CSS findet man auch genug, zB so

```typoscript
	page.includeCSS {
		file1 = fileadmin/template/main.css
		file2 = fileadmin/template/navigation.css
	}
```

georg

### [#10](https://www.typo3.net/d/39055-menues-basierend-auf-css/10) · fantriXx · 2006-03-08

Ist ja Nett, nur bi nein Anfänger in Sachen Typo3 und weiss nicht wo und wie ich das alls mache, du müsstest mir das schon bischen detalierter erklären würdest ?!
Muss ich das in mein Templater einbinden oder wie ?

Danke im voraus.

### [#11](https://www.typo3.net/d/39055-menues-basierend-auf-css/11) · Unbekannter Benutzer · 2006-03-08

muss in dein Template, ja

### [#12](https://www.typo3.net/d/39055-menues-basierend-auf-css/12) · fantriXx · 2006-03-08

Hmm ja gut ok und wo genau ?!  :o
Muss das in die "Constants" oder in die "Include static" oder wie ?

Sorry, aber um was zu lernen muss man was Fragen ...

### [#13](https://www.typo3.net/d/39055-menues-basierend-auf-css/13) · Unbekannter Benutzer · 2006-03-08

bevor man Fragen stellt sollte man sich aber etwas damit beschäftigt haben und die Grundsätze kennen bevor man sich mit Komplexerem auseinandersetzt.

Arbeite dich mal durch das durch:
<http://www.typo3.net/uploads/media/dokumentation.pdf>

btw: der Code von just2b muss ins Setup-Feld deines Templates

### [#14](https://www.typo3.net/d/39055-menues-basierend-auf-css/14) · just2b · 2006-03-08

> **fantriXx schrieb:**
>
> Sorry, aber um was zu lernen muss man was Fragen

Man kann es aber auch selbst versuchen, bzw Dokus, wie diese  [hier](http://www.typo3.net/uploads/media/dokumentation.pdf) lesen, um das Konzept von TYPO3 bzw TS verstehen zu lernen

nicht böse sein
lg georg

### [#15](https://www.typo3.net/d/39055-menues-basierend-auf-css/15) · fantriXx · 2006-03-08

Klar lese ich Dokumentationen ich bin gerade beim Buch von Galileo Computing "Typo3 Das Handbuch für Entwickler" und bin fleißig am lesen und die Grundlagen habe ich auch shcon durch und kenne mich schon mit dem Programm einiger maßen aus. Nur wollte ich mich mal an sowelche Sachen wie Script wagen und bin in einem Fremden Gebiet und deswegen diese Fragen.

### [#16](https://www.typo3.net/d/39055-menues-basierend-auf-css/16) · jnreutel · 2006-03-08

Hi just2b,

Dein HOW-TO ist echt klasse und funktioniert auch spitzenmäßig. Eine kurze Frage hätte ich noch: Was muss ich machen damit beim vertikalen Menü Aufzählungszeichen erscheinen oder wo muss dies in der CSS-Datei eingefügt werden. (<ul type="square">)

### [#17](https://www.typo3.net/d/39055-menues-basierend-auf-css/17) · just2b · 2006-03-08

Hi,

> **jnreutel schrieb:**
>
> Was muss ich machen damit beim vertikalen Menü Aufzählungszeichen erscheinen oder wo muss dies in der CSS-Datei eingefügt werden.

hm funktioniert auf Anhieb grad nicht ganz, warum machst du es nicht über ein background-image in ul#nav li {}, find ich IMHO sowieso schöner und bietet mehr Möglichkeiten

lg georg
ps: thx

### [#18](https://www.typo3.net/d/39055-menues-basierend-auf-css/18) · jnreutel · 2006-03-08

Hab ich grad mit folgendem Code probiert.

ul#nav li {
	position: relative;
	list-style: none;
	background: transparent url(pfeil.gif) left center no-repeat;

Problem ist jetzt dass nun die Menüs über den Pfeil liegen und nicht dahinter.
[/img]

### [#19](https://www.typo3.net/d/39055-menues-basierend-auf-css/19) · gumble77 · 2006-03-12

Hallo, erstmal vielen Dank für dieses anschauliche Beispiel! Nachdem ich eine Woche lang vergeblich versucht hab, das ypSlideOut-Menü in meinem Projekt ans Laufen zu kriegen, war dieser Thread hier Balsam für meine geschundene Seele! ;)

Das Beispiel funktionierte anfangs wunderbar. Allerdings wollte ich die erste Ebene gerne durch ein GMENU ersetzen, seitdem klappt es nicht mehr und der IE meldet den JScriptfehler: 'document.getElementById(...)' ist Null oder kein Objekt.

Außerdem werden Rahmen um die Buttons angezeigt, obwohl ich eigentlich noBlur =1 gesetzt habe.

Da ich noch frischer T3-Einsteiger bin, hab ich sicher irgendeinen dämlichen Fehler gemacht. Ich würde mich daher über jeden Tipp freuen, an welcher Stelle ich suchen muss.  :o

Mein Script (eingeklammert hinter 10.marks des page-Objekts):

```typoscript
#Grafikmenü oben
MENU_OBEN = HMENU
MENU_OBEN {
	   special = directory
	   special.value = 30
           entryLevel = 0
           expAll = 1

	   1 = GMENU
	   1.NO = 1
           1.NO {
                 XY = 200, 30
                 backColor = #111111
                 transparentColor = #111111
                 maxWidth = 200
                 maxHeight = 30
                 noBlur = 1
                                               
                 #Menütext 1. Ebene rendern
                 10 = TEXT
                 10.text.field = title
                 10.align = middle
                 10.textMaxLength = 20
                 10.fontColor = #000000
                 10.fontFile = fileadmin/fonts/verdana.ttf
                 10.fontSize = 18
                 10.niceText = 0
                 10.offset = 20, 20

                 #Schatten auf Ebene 5 kopieren
                 5 < .10
                 5 {
                    offset = 19, 21
                    fontColor = #555555
                   }
                }
	                      
           1.RO < .1.NO
           1.RO.10.fontColor = #666666

           2 = TMENU
           2 {    
              wrap = <ul id="nav">|</ul>
	      noBlur = 1
	      NO = 1
	      NO.wrapItemAndSub = <li>|</li>

	      IFSUB = 1
	      IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
	      ACTIFSUB < .IFSUB
             }
	                      
           3 < .2
           3.wrap = <ul>|</ul>

	   4 < .3
          }
```

Vielen Dank für jeden Hinweis!

### [#20](https://www.typo3.net/d/39055-menues-basierend-auf-css/20) · kleiner Onkel · 2006-03-31

Hallo just2b !!!

Ich habe dieses horizontale menu auch auf meiner Seite eingebunden und muss Dir an dieser Stelle ein großes Lob und meinen besonderen Dank aussprechen.

Was mich aber ein wenig zum staunen gebracht hat ist, dass in Opera 8.5 (ich habe keine andere OperaVersion zum testen) ein horizontaler Scrollbalken angezeigt wird, der sehr lang ist. Mit FF und ausnahmsweise auch dem IE ist das nicht der Fall. Wieso ist das so bzw. gibt es eine Möglichkeit dies auszuschalten???

liebe Grüße und nochmals "DANKE" !!!

### [#21](https://www.typo3.net/d/39055-menues-basierend-auf-css/21) · just2b · 2006-04-01

> **kleiner Onkel schrieb:**
>
> Ich habe dieses horizontale menu auch auf meiner Seite eingebunden und muss Dir an dieser Stelle ein großes Lob und meinen besonderen Dank aussprechen.

Das freut mich!
Gibts wo eine URL?, vielleicht kann ich bzgl des Problems helfen

georg

### [#22](https://www.typo3.net/d/39055-menues-basierend-auf-css/22) · d.​walter · 2006-04-06

Hallo Georg,

ich hab mal deine Beispiele kurz überflogen. Und natürlich Ehre wem Ehre gebührt ein dickes Lob und jede Menge Anerkennung.

Das Problem mit dem horizontalen Scrollbalken kommt imo daher, dass dein Menü immer nach rechts aufgeht, d.h. es aus dem Bildschirmrand läuft.

Ich denke mal, dass das Javascript angepasst werden muss, damit es ab einem gewissen Punkt nach links aufgeht.

Gruß

Daniel

### [#23](https://www.typo3.net/d/39055-menues-basierend-auf-css/23) · katih · 2006-04-10

Hallo Zusammen,

ich habe mich auch mal an das vertikale Menü gewagt und (habe es nicht anders erwartet) klappt es bei mir leider nicht.

Mein Problem ist, dass die Untermenüs entweder gar nicht aufklappen oder nur nach unten aufklappen und nicht wie ich es gerne möchte, nach rechts aufklappen...

Kann mir da jemand bitte helfen?!

Ich sag schon mal DANKE!
LG,katih

Habe euch hier mal mein TS gepostet

```typoscript
page.includeCSS {
file1 = fileadmin/template/main.css
file2 = fileadmin/template/navigation.css
                            } 
page = PAGE
page {
      typeNum = 0
      # Allgemeine Seiteneigenschaften setzen
      bodyTag = <topmargin="1" leftmargin="1"><div align="center">
      meta.AUTHOR=Katja Hullesch
      meta.DESCRIPTION=artifex,handwerk,wohnen,leben
      stylesheet=fileadmin/style.css

      # Designvorlage integrieren
      10 = TEMPLATE
      10.template = FILE
      10.template.file = fileadmin/Artifex_02.htm

      # Inhalt ausgeben
      INHALT = CONTENT
      INHALT {
      table = tt_content
      select.orderBy = sorting
      select.where = colPos = 0
                        }           

 10.marks {
      # Den Platzhalter ###KLICKPFAD### erstellen
     KLICKPFAD = HMENU
     KLICKPFAD {
        wrap = Sie befinden sich hier: |
        special = rootline
        special.range = 2|-1
       1 = TMENU
       1.NO = 1
       1.NO.linkWrap = | / 
                              }    
       # Den Platzhalter ###INHALT### ausgeben
       INHALT = CONTENT
       INHALT {
          table = tt_content
          select.orderBy = sorting
          select.where = colPos = 0
                        }

      #Den Platzhalter ###MENU_UNTEN###erstellen
        MENU_UNTEN = HMENU
        MENU_UNTEN {
           special = directory
          special.value = 223
         1 = TMENU
          1.NO = 1
          1.NO.linkWrap =  | | |*|  | | |*|
                                   }
      # Inhalt ausgeben
         INHALT = CONTENT
         INHALT {
           table = tt_content
           select.orderBy = sorting
           select.where = colPos = 0
           }     

# Den Platzhalter ###MENU_OBEN### erstellen
          MENU_OBEN = HMENU
          MENU_OBEN {
          special = directory
         special.value = 224
          entryLevel = 0
                           
                                   
          1 = GMENU
        1.NO = 1
        1.NO {
       wrap = |<br />
       XY = 178, 40+[16.h]
      backColor = #FFCC99

     # Text auf den Menüpunkt rendern
     10 = TEXT
    10.text.field = title
     10.text.listNum = 0
     10.text.listNum.splitChar = |
     10.fontColor = #000000
    10.fontFile = fileadmin/fonts/verdana.ttf
    10.fontSize = 14
    10.niceText = 1
    10.offset = 50, 16

    # Hilfsebene zur Berechnung der Höhe der Menüpunkte
    16 < .10 
    16.text.case = upper
    16.text.listNum = 1
    16.fontSize = 22
    16.offset = 1000,1000
              }
                 
    2 = TMENU 
    2 {
      expAll = 1
      wrap =  <ul id="nav">|</ul>
      noBlur = 1
      NO = 1
	NO.wrapItemAndSub = <li>|</li>
          IFSUB = 1
          IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
          ACTIFSUB < .IFSUB

	}
	3 < .2	
	3.wrap = <ul>|</ul>

	4 < .3
	5 < .4
}


 }

}
```

### [#24](https://www.typo3.net/d/39055-menues-basierend-auf-css/24) · Gecko6 · 2006-05-06

Hallo Georg!

Da muß ich mich auch auf jeden Fall herzlich bedanken. Genau das was ich lange gesucht, aber nie gefunden habe. Und jetzt hat mir der Zufall zu Deinem super Eintrag und einer klasse Lösung verholfen.

Top - vielen Dank!

Gruß Robert

### [#25](https://www.typo3.net/d/39055-menues-basierend-auf-css/25) · just2b · 2006-05-07

Hallo Robert,

vielen Dank für dein Feedback! Würd mich freuen wenn du mir die URL zu der Seite postest wo du das Menü eingebaut hast

lg georg

### [#26](https://www.typo3.net/d/39055-menues-basierend-auf-css/26) · lulatsch · 2006-05-07

Hallo Georg,

dein Menü werde ich sicher mal bei Gelegenheit verwenden und dir die
URL dazu schicken - auf jeden Fall schon mal vielen Dank für deine
Veröffentlichung, nur davon lebt ja die Community.

Eigentlich muss das aber auch ganz ohne JS gehen, so wie hier
<http://www.cssplay.co.uk/menus/final_drop.html>
beschrieben - wollte ich schon immer mal in Typo umsetzen, nur leider
bisher keine Zeit gehabt.

VG
Falko

### [#27](https://www.typo3.net/d/39055-menues-basierend-auf-css/27) · Tsoukis · 2006-05-08

Hey, vielen Dank für diese Super-Lösung, die einwandfrei funktioniert

### [#28](https://www.typo3.net/d/39055-menues-basierend-auf-css/28) · Unbekannter Benutzer · 2006-05-12

Die Lösung stimmt mich recht positiv! Allerdings habe ich Probleme mit der Größe der ersten Menuepunkte (immer gleich, da das Element #nav ul nicht genau formatiert werden kann bzw. ich zu doof bin)

Wäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.

Bin für jede Lösung dankbar!

### [#29](https://www.typo3.net/d/39055-menues-basierend-auf-css/29) · just2b · 2006-05-12

> **AndyKöln schrieb:**
>
> Wäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.

IMHO nicht, wiel du ja ein display:block brauchst

### [#30](https://www.typo3.net/d/39055-menues-basierend-auf-css/30) · Unbekannter Benutzer · 2006-05-15

Huhu, nochmal ich - gibt es ne Möglichkeit, das "standartmäßige" t_menu layer zu umgehen? Der Source-Code ist viel zu lang(bei einer sehr tiefen Navigation). Hat jemand ne Lösung? Gibt es hier nen Ansatzpunkt? Neben dem CSS basierten Layout, wäre doch bestimmt noch was anderes denkbar?

### [#31](https://www.typo3.net/d/39055-menues-basierend-auf-css/31) · just2b · 2006-05-15

> **AndyKöln schrieb:**
>
> Huhu, nochmal ich - gibt es ne Möglichkeit, das "standartmäßige" t_menu layer zu umgehen? Der Source-Code ist viel zu lang(bei einer sehr tiefen Navigation). Hat jemand ne Lösung? Gibt es hier nen Ansatzpunkt? Neben dem CSS basierten Layout, wäre doch bestimmt noch was anderes denkbar?

und zwar was? vorschläge immer willkommen

### [#32](https://www.typo3.net/d/39055-menues-basierend-auf-css/32) · kazi · 2006-06-07

Ich habe versucht das Beispiel wie nachfolgend einzubinden !

Was mache ich falsch ?

Habe den TS-Code im Setup Bereich wie folgt eingebunden:
1.

```typoscript
page = PAGE
page.typeNum = 0 

page.10 = TEMPLATE  
page.10 {
template = FILE
template.file = fileadmin/templates/Template-4.html
workonSubpart = DOKUMENT
marks.CONTENT < styles.content.get
}

#page.stylesheet = fileadmin/styles/styles-ie.css
page.stylesheet = fileadmin/styles/horizontal.css

page.includeLibs.gmenu_layers = fileadmin/scripts/tmenu_layers.php


headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/horizontal.js"></script>


page.10.marks.PRIN = HMENU
page.10.marks.PRIN {
	special = directory
	special.value = 850

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
```

2. Im HTML-Template soll der Marker ###PRIN### ersetzt werden.
Wird auch, aber es erscheint kein Layermenü

3. Die Dateien horizontal.js und horizontal.css an die entsprechenden Stellen kopiert und die Rechte per chown angepasst.

Kann mir jemand einen Tip geben ?

Ich denke ich binde die Header Darten falsch ein ??

Zeile 18,19,20   (der Zeilenumbruch bei Zeile 20 existiert nicht Forumsoftware bricht es um)

Danke und Ciao
Kazi

### [#33](https://www.typo3.net/d/39055-menues-basierend-auf-css/33) · just2b · 2006-06-07

probier mal

```typoscript
page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="foo.js"></script>
}
```

### [#34](https://www.typo3.net/d/39055-menues-basierend-auf-css/34) · kazi · 2006-06-07

Hallo Just2B,

danke für deine Hilfe :-)

Ich habe meinen Code auf dein anraten auf den Zeilen (10,11,12) wie nachfolgend abgeändert. Jedoch erscheint das Layermenü immer noch nicht wofür steht eigentlich nochmla diese 850 ?

```typoscript
page = PAGE
page.typeNum = 0 

page.10 = TEMPLATE  
page.10 {
 template = FILE
 template.file = fileadmin/templates/Template-4.html
 workonSubpart = DOKUMENT
 marks.CONTENT < styles.content.get
 headerData = COA
 headerData.11 = TEXT
 headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/horizontal.js"></script>

}

#page.stylesheet = fileadmin/styles/styles-ie.css
page.stylesheet = fileadmin/styles/horizontal.css

#page.includeLibs.gmenu_layers = fileadmin/scripts/tmenu_layers.php


page.10.marks.PRIN = HMENU
page.10.marks.PRIN {
	special = directory
	special.value = 850

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
```

### [#35](https://www.typo3.net/d/39055-menues-basierend-auf-css/35) · kazi · 2006-06-07

Just2B,

danke nochmal für deine Hilfe .

Problem gelöst !!!   #giggle#   #giggle#  #giggle#

Lag am special.value.

Die 850 musste ich durch die Root ID bei mir nämlich 16 ersetzen.

Anfängerfehler ;-)

Ciao

Kazim

### [#36](https://www.typo3.net/d/39055-menues-basierend-auf-css/36) · kazi · 2006-06-12

Hallo Leute,

wie bereits in meinen letzten Posts erwähnt habe ich es mit meinem Code geshcafft das CSS Menü einzubinden. Jedoch funktioniert es nur auf dem Firefox, nicht aber im IE Version 6.0.28.

PS: Javascript ist eingeschaltet.

### [#37](https://www.typo3.net/d/39055-menues-basierend-auf-css/37) · just2b · 2006-06-12

> **kazi schrieb:**
>
> Jedoch funktioniert es nur auf dem Firefox, nicht aber im IE Version 6.0.28.

was ist **es**? wenn die 2.ebene nicht erscheint im IE? ist das JS auch richtig eingebunden, quellcode => stimmt der pfad

georg

### [#38](https://www.typo3.net/d/39055-menues-basierend-auf-css/38) · littlejoe · 2006-06-12

Habe das CSS-menu von CSS-Play in Typo3 eingebunden erfolgreich in Firefox und IE eingbunden.

Den Typo Code findet ihr unter folgendem Post.

[/d/43641-css-menue/4](https://www.typo3.net/d/43641-css-menue/4)

Gruß LittleJoe
[/url]

### [#39](https://www.typo3.net/d/39055-menues-basierend-auf-css/39) · flowtime · 2006-06-15

hallo, erstmal danke für das menü,allerdings hab ich ein problem. ich hab alles wie beschrieben eingerichtet, bekomme aber bei den menüpunkten ohne unterpunkte nen zeilenumbruch nach dem a-tag... also so ->
<li><a href="47.0.html">Ansprechpartner</a>**<br>**</li>

kann mir jemand erklären wo das herkommt?
wie gesagt, es schaut alles so aus wie im ersten post beschrieben...

schonmal danke!

### [#40](https://www.typo3.net/d/39055-menues-basierend-auf-css/40) · mve2602 · 2006-06-19

mich würde sehr interessieren, wie das Menu als Gmenu realisiert wird.
Momentan sieht der Code so aus, allerdings funktioniert es nur im IE 6
richtig. Im Firefox passiert gar nix.
Wäre lieb, wenn mir da jemand weiterhelfen könnte, leider gibt es ja bei Gmenus kein "wrapItemAndSub" :-(

```typoscript
temp.gmenu-2 = HMENU 
temp.gmenu-2{ 
special = directory
special.value = 20
#entryLevel = 0 

1 = GMENU 
1 { 
	  expAll = 1
	  wrap = <ul id="nav">|</ul>
	  noBlur = 1
          NO = 1
          NO {
               ATagTitle.field = title
		 #wrap = <li>|</li>
		 wrap = <li class="menuparent">|</li>
               XY = 178, 28 |*| 84,28 |*| 84,28
               backColor = #b74249 |*| #c8706d |*| #c8706d
               50 = TEXT
               50 {
                    text.field = title
                    fontSize = 18
                    fontFile = fileadmin/template/fonts/ATRotSemSanBol.ttf
                    fontColor = #000000
		    align = left
                    offset = 18,20 |*| 3,20 |*| 3,20
                    transparentBackground = 1
               }
          } 

          ACT < .NO
	  ACT = 1	
          ACT.50.fontColor = #FFFFFF	   

          RO < .ACT
          RO = 1
  } 

2 < .1
2 = GMENU
2 {
	wrap = <ul>|</ul>
	NO = 1	
	NO {
              XY = 178, 15
	      backColor = #FFFFFF
		50 = TEXT
		50 {
		     niceText = 1
                     offset = 100,10
		     fontSize = 12
		}
	}

	ACT < .NO
	ACT = 1
	ACT.50.fontColor = #a7032f

	RO < .ACT
	RO = 1
	RO.50.fontColor = #a7032f
}
}
```

### [#41](https://www.typo3.net/d/39055-menues-basierend-auf-css/41) · just2b · 2006-06-19

Ich habs so gelöst

```typoscript
marks.MENU = HMENU
marks.MENU {
	special = directory
	special.value = 158
	entryLevel = 1
	
	1=GMENU
	1 {
		wrap = <ul id="nav">|</ul>
		expAll = 1
		noBlur = 1

		NO = 1    
		NO {
			allWrap = <li>|</li>
			transparentBackground = 1
			XY=135,24
		
			10=TEXT
			10 {
				text.field=title
				offset=1,20
				fontColor=#000E31
				fontFile=fileadmin/fonts/madfont.ttf
				fontSize=11       
			}
		}
		ACT <.NO
		ACT.10.fontColor = red

		IFSUB <.NO
		IFSUB.allWrap =  <li class="menuparent">|
		IFSUB.5 = IMAGE
		IFSUB.5.file = fileadmin/listmenu/right_gmenu_no.gif

		ACTIFSUB <.IFSUB
		ACTIFSUB.5.file = fileadmin/listmenu/right_gmenu_act.gif
		ACTIFSUB.10.fontColor = red

		RO <.NO
		RO.10.fontColor = blue

		ACTRO <.RO
		ACTIFSUBRO <.RO
		ACTIFSUBRO.5 = IMAGE
		ACTIFSUBRO.5.file = fileadmin/listmenu/right_gmenu_actifsubro.gif

		IFSUBRO <.ACTIFSUBRO

	}

	2 = TMENU
	2 {
		wrap  = <ul>|</ul></li>
		expAll = 1
		noBlur = 1

		NO = 1  
		NO.allWrap = <li>|</li>

		ACT <.NO
		ACT.allWrap = <li class="nav2act> |</li>

		IFSUB = 1
		IFSUB.allWrap =  <li class="menuparent">|

		ACTIFSUB = 1
		ACTIFSUB.allWrap =  <li class="menuparent">|

	}
	3 <.2	
}
```

georg

### [#42](https://www.typo3.net/d/39055-menues-basierend-auf-css/42) · jonny-depp · 2006-06-22

Im firefox wird bei mir die Seite richtig angezeigt. Aber im Internet Explorer wird kein aufklappendes Menü gezeigt.
Ich habe mal zwei Printscreens gemacht.

Kennt jemand dieses Problem?

Ich hab mal noch die TS-Konfiguration angehängt.

[Bild: s2.bilder-hosting.de/…/SL8T6.jpg](http://s2.bilder-hosting.de/img/SL8T6.jpg)

[Bild: s2.bilder-hosting.de/…/SLDM9.jpg](http://s2.bilder-hosting.de/img/SLDM9.jpg)

```typoscript
heady = COA
heady.11 = TEXT
heady.11.value = <script type="text/javascript" src="fileadmin/page/Javascript/horizontal.js"></script> 
seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.includeCSS {
     file1 = fileadmin/page/hp.css
     file2 = fileadmin/page/navigation.css
      } 
seite.10 = TEMPLATE
seite.10 {
   template = FILE
   template.file = fileadmin/page/page.html
   workOnSubpart = CONTENT
   marks.DOCUMENT < styles.content.get 
 marks.MENUE = HMENU
marks.MENUE {
	special = directory
	special.value = 4

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
}
```

### [#43](https://www.typo3.net/d/39055-menues-basierend-auf-css/43) · just2b · 2006-06-22

die js-Datei wird auch im quellcode eingebunden?

georg

### [#44](https://www.typo3.net/d/39055-menues-basierend-auf-css/44) · jonny-depp · 2006-06-22

im html-quellcode nicht, aber im TS-Code.

gehört im HTML noch etwas hin?

Mein momentaner Stand:

```html
<!--###CONTENT###-->
<div class="wrap">
	
<div class="header"> </div>
 <table boarder="0">
	<tr>
		<td width="780">
			<div class="topnav" id="nav">
				###MENUE###
			</div>	
		</td>
	</tr>
	
	<tr>
		<td>
			<div>
				<table boarder="0" width="780">
					<tr>
						<td>
							<img src="fileadmin/page/images/blank.gif" width="30" height="0" border="0" alt="" />
						</td>
					
						<td>
							###DOCUMENT###
						</td>
						
						<td>
							<img src="fileadmin/page/images/blank.gif" width="30" height="0" border="0" alt="" />
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>


<!--###CONTENT###-->
```

### [#45](https://www.typo3.net/d/39055-menues-basierend-auf-css/45) · just2b · 2006-06-22

nun dann stimmt der pfad nicht oder nicht wie es eingebunden wird ;)

page.headerData ...

georg

### [#46](https://www.typo3.net/d/39055-menues-basierend-auf-css/46) · jonny-depp · 2006-06-22

habe mal folgendes versucht:

```typoscript
seite.header = COA
seite.header.11 = TEXT
seite.header.11.value = <script type="text/javascript" src="fileadmin/page/Javascript/horizontal.js"></script>
```

mit dem Firefox funktionierte es.
Leider mit dem Internet Explorer leider nicht.

### [#47](https://www.typo3.net/d/39055-menues-basierend-auf-css/47) · mve2602 · 2006-06-23

Vielen Dank Georg für deine Hilfe, habe es noch ein klein wenig an meine Bedürfnisse anpassen müssen und es läuft einwandfrei ;-)

Hier noch einmal das Typoscript für alle, die ein reines Gmenu auf Basis dieses Listenmenus realisieren möchten.

```typoscript
...
page = PAGE
page {
	headerData.30 = TEXT
	headerData.30.value = <script type="text/javascript" src="fileadmin/template/scripts/horizontal_JS.js"></script> 
}
...
# Dynamisches Grafikmenu der shop Ebene

temp.gmenu-2 = HMENU
temp.gmenu-2 {
    
  special = directory
  special.value = 20
  excludeUidList = 29
        
    1 = GMENU
    1 {
      wrap = <div id="gmenu-2"><ul id="nav">|</ul></div>
      expAll = 1
      noBlur = 1
  
       NO = 1    
       NO {
 
            allWrap = <li>|</li>
            XY = 168, 28 |*| 84,28 |*| 84,28
            backColor = #b74249 |*| #c8706d |*| #c8706d

                50=TEXT
                50 {
                    text.field = title
                    fontSize = 16
                    fontFile = fileadmin/template/fonts/ATRotSemSanBol.ttf
                    fontColor = #FFFFFF
		    align = left
                    offset = 15,20
                    niceText = 1
                 }
       }
         
       ACT <.NO
       ACT.50.fontColor = #000000
 
       IFSUB <.NO
       IFSUB.allWrap =  <li class="menuparent">|

       ACTIFSUB <.IFSUB
 
       RO <.ACT
 
       ACTRO <.RO
       ACTIFSUBRO <.RO
 
       IFSUBRO <.ACTIFSUBRO

   }
 
   2 = GMENU
   2 {
     wrap  = <ul>|</ul></li>
     expAll = 1
     #noBlur = 1
 
      NO = 1  
      NO {               

        allWrap = <li>|</li>
        XY = 83, 25
	backColor = #b74249 
						
                50 = TEXT
		50 {
		text.field = title
        	niceText = 1
	        offset = 15,18
        	fontColor = #FFFFFF
		fontSize = 14
               	fontFile = fileadmin/template/fonts/ATRotSemSanBol.ttf	
                }
 
        ACT <.NO
        ACT.allWrap = <li class="nav2act> |</li>

        IFSUB = 1
        IFSUB.allWrap =  <li class="menuparent">|

        ACTIFSUB = 1
        ACTIFSUB.allWrap =  <li class="menuparent">|
                
        RO < .NO
        RO = 1
        RO.backColor = #c8706d
    }
    3 <.2   
}
```

Das einzige, was mich jetzt noch richtig glücklich machen würde, wäre eine kleine Optimierung für Suchmaschinen. Und zwar ein Title-Tag im A-Tag. Habe hier im Forum schon einiges zu diesem Thema gefunden, allerdings hat es bei mir nie bei GMENU´s gegriffen.

Vielen Dank an alle Interessierten.

### [#48](https://www.typo3.net/d/39055-menues-basierend-auf-css/48) · jonny-depp · 2006-06-23

Habs herausgefunden ;-)

Der Header muss so sein.

```typoscript
seite = PAGE
seite {
       headerData.30 = Text
       headerData.30.value = <script type="text/java......">
}
...
```

Ist mir gar nicht aufgefallen #paralyzed#

Danke vielmals für die Hilfe.

### [#49](https://www.typo3.net/d/39055-menues-basierend-auf-css/49) · NetPartyzan · 2006-06-25

Erstmal schönen Dank für die bereitstellung dieses super schlanken Menus  8-)

Habs gleich mal auf diversen Browsern getestet, leider hat die Beta 2 vom IE7 derzeit Probleme (Betrifft vertikale Version). Hoffen wir mal das dieser Bug noch gefixt wird , Problem ist bei MS schon gepostet worden.

Lösung des Probs: definition Höhe der Listenelemente

MfG Jo

### [#50](https://www.typo3.net/d/39055-menues-basierend-auf-css/50) · donenik · 2006-06-27

**@ just2b:**
Boa wie cool bist du denn!!!! Ich habe gerade anfangen mir die Zähne dran auszubeißen das Layermenü XHTML tauglich hinzukriegen!

DANKE!

### [#51](https://www.typo3.net/d/39055-menues-basierend-auf-css/51) · just2b · 2006-06-28

Hallo,

> **donenik schrieb:**
>
> Boa wie cool bist du denn!!!! Ich habe gerade anfangen mir die Zähne dran auszubeißen das Layermenü XHTML tauglich hinzukriegen!

8-)  vielen herzlichen Dank! Veröffentlich doch einen Link dann später zu deiner Umsetzung!

georg

### [#52](https://www.typo3.net/d/39055-menues-basierend-auf-css/52) · w@ · 2006-06-28

Hallo,

Ich versuche mich gerade mal dran das Horizontale DropDown Menu in das
YAML Template von t3net.de einzubinden....
Mit mässigem Erfolg ;)

Das TS-Template schaut bei mir folgendermassen aus
und ist in ein +ext template ausgelagert...

```typoscript
page {
  headerData = COA
  headerData.11 = TEXT
  headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/horizontales-dropdown-menu.js"></script>
}

#
# subpart temp.nav_main
#############################
#
temp.nav_main = COA
temp.nav_main.10 = HMENU
temp.nav_main.10 {
	special = directory
	special.value = 1

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
```

Im HTML Quelltext wird das .js Script so referenziert....

```html
<script type="text/javascript" src="fileadmin/scripts/horizontales-dropdown-menu.js"></script>
```

und zwar gleich bevor die Meta-Tags beginnen....

Leider will das aber nicht wirklich mit dem IE.... :'(
Im Firefox klappts mit dem DropDown wenn mir auch die Styles noch
Kopfzerbrechen bereiten...

Hat da schon jemand Erfahrung mit gemacht und kann mir mit
ein/zwei Tipps Schützenhilfe geben...?

Merci vielmal und Gruss
Peter

### [#53](https://www.typo3.net/d/39055-menues-basierend-auf-css/53) · SirVivor · 2006-06-29

Hi,

vielen lieben dank für diese 2 super beispiele, habe sie schon in verwendung und sogar ICH  :o   :o hab es geschaft das ans laufen zu kriegen und anzupassen!

dickes danke nochmal!

sascha

zu sehen unter <http://www.beach-sports.at> und <http://www.computerservice-vienna.at>  8-)

### [#54](https://www.typo3.net/d/39055-menues-basierend-auf-css/54) · donenik · 2006-06-30

> **just2b schrieb:**
>
> Hallo,
>
> > **donenik schrieb:**
> >
> > Boa wie cool bist du denn!!!! Ich habe gerade anfangen mir die Zähne dran auszubeißen das Layermenü XHTML tauglich hinzukriegen!
>
> 8-)  vielen herzlichen Dank! Veröffentlich doch einen Link dann später zu deiner Umsetzung!
>
> georg

Ja nen kleinen Einblick kann ich schon gewähren denke ich. Funzt noch nicht 100%ig wie das mal soll und Text is auch noch nich drin. Das größte Problem is allerdings das ich den Hintergrund transparent gemacht habe (ich weiß der scheiß ie kann das nich) und das sich das dann beim Mousse Over über die ganze Höhe der Seite erstrecken soll. Und das natürlich ohne Scrollbalken wenns nich sein muss. Scheiß Perfektionismus oder?
Also hier gucken: <http://franziska.hensdiek.com>

### [#55](https://www.typo3.net/d/39055-menues-basierend-auf-css/55) · just2b · 2006-06-30

hehe Perfektionismus... sag mir nichts ;)

Sitz jetz 3 Tage am Menü  :D
Neuigkeiten die es bald geben wird:
- Menü schließt nicht sofort wenn die Maus außerhalb
- Version mit Icons
- jeder Menüpunkt kann vom Redakteur anders gestylt werden, dh Schriftgröße, Icon, Hintergrund, whatever, ist eine eigene Extension geworden (die natürlich auch bei anderen Menüs funktioniert.
**Preview**
[Bild: p19156.typo3server.info/…/previewMenu.gif](http://p19156.typo3server.info/fileadmin/menu/previewMenu.gif)

lg georg

### [#56](https://www.typo3.net/d/39055-menues-basierend-auf-css/56) · donenik · 2006-06-30

Jaja alles könnte so leicht sein :D
Mit dem Menü hast du dir ja echt was vorgenommen! Hatte mit Extensions schreiben bis jetzt noch nicht viel am Hut, hab nur mal aus dem Gästebuck ein Bestellformular gemacht, mit Preis ausrechnen und so. Aber es hat funktioniert :-)

### [#57](https://www.typo3.net/d/39055-menues-basierend-auf-css/57) · just2b · 2006-06-30

> **donenik schrieb:**
>
> Mit dem Menü hast du dir ja echt was vorgenommen!

is ja schon fertig ;))))

### [#58](https://www.typo3.net/d/39055-menues-basierend-auf-css/58) · nickno · 2006-06-30

Echt vorbildlich, deine Zeit für so ein HowTo zu opfern. Kompliment.

Man sollte nur vllt noch einmal überdenken, wie man diese HowTos sinnvoll ins Forum integriert. Dieses HowTo ist 2 Monate alt, aber der Thread schon dermassen vollgeschrieben, dass Fragen kreuz und quer gestellt werden (müssen).

Wäre eine eigene Sektion "Howtos" nicht vielleicht sinnvoller? Zu jedem Howto kommt ein Link zu einem Thread, wo diskutiert werden kann. So könnte der Hauptthread nur von dem Ersteller genutzt werden um Aktualisierungen u.ä. zu posten und die (für viele uninteressante) Diskussion findet in einem weiteren Thread statt bzw. die Leute sollten lieber das Forum durchsuchen, um bspw. zu wissen, wie man eine CSS oder JS-Datei einbindet. Schliesslich hängen diese Fragen  nur indirekt mit dem Menü zusammen.

Nur ein Vorschlag...

Gruß

### [#59](https://www.typo3.net/d/39055-menues-basierend-auf-css/59) · just2b · 2006-06-30

> **nickno schrieb:**
>
> Wäre eine eigene Sektion "Howtos" nicht vielleicht sinnvoller?

Einfach links mal auf "HowTos" klicken ;)

sonst geb ich dir schon recht und ist auch angedacht!

georg

### [#60](https://www.typo3.net/d/39055-menues-basierend-auf-css/60) · nickno · 2006-06-30

> **just2b schrieb:**
>
> Einfach links mal auf "HowTos" klicken ;)

Das hatte ich schon gesehen, aber dort auch die tausend Posts von anderen Nutzern ;)

### [#61](https://www.typo3.net/d/39055-menues-basierend-auf-css/61) · just2b · 2006-06-30

> **nickno schrieb:**
>
> Das hatte ich schon gesehen, aber dort auch die tausend Posts von anderen Nutzern ;)

Sei doch froh dass es mehr werden ;)

Und sonst einfach nen Thread aufmachen und auf ein HowTo verweisen, ist ja keiner böse ;)))

georg

### [#62](https://www.typo3.net/d/39055-menues-basierend-auf-css/62) · moadin · 2006-07-13

Hallo,

erstmal vielen Dank an just2b für die Programmierung des Menüs! Es ist wirklich klasse!

Hier im Forum wurde schon einmal angesprochen, dass das Menü ab einem bestimmten Punkt nach rechts aufklappen sollte.
Genau das Problem habe ich auch, mir gehen nämlich die Unterpunkte des letzten horizontalen Menüpunktes neben dem Bildschirm rechts am Rand verloren.
Hat jemand eine Idee wie man dafür das JS umprogrammieren muss?

Grüße,

moadin

### [#63](https://www.typo3.net/d/39055-menues-basierend-auf-css/63) · just2b · 2006-07-13

hallo,

vielen dank! das ist eher mit css zu lösen! also mit optionsplit für den letzten punkt eine andere class und dann für dies gezielt ändern...

js is nur fürn IE, dass es auch dort aufgeht, mehr nicht

### [#64](https://www.typo3.net/d/39055-menues-basierend-auf-css/64) · moadin · 2006-07-13

Hallo just2b,

was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...

moadin

### [#65](https://www.typo3.net/d/39055-menues-basierend-auf-css/65) · just2b · 2006-07-13

> **moadin schrieb:**
>
> Hallo just2b,
>
> was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
> Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...
>
> moadin

ja schon alles richtig... ist aber denk ich bei den layer-menüs auch nicht anders, oder irr ich mich? naja mal schauen ob mir was einfällt dazu,.. oder wem anderen, hilfe = willkommen ;)

georg

### [#66](https://www.typo3.net/d/39055-menues-basierend-auf-css/66) · moadin · 2006-07-13

Hi just2b,

auf grainau.de wird bspw. ein DHTML-Menü eingesetzt, das entsprechend der Fensterbreite das Menü nach Links bzw. Rechts aufklappt. Allerdings wird das halt über Javascripts (onmouseover/out)gesteuert und ein Blick in den Quellcode zeigt dass das für TYPO3 nicht unbedingt geeignet ist.
Da gefällt mir deine kompakte Version schon sehr viel besser...!

Wäre ja super wenn es dafür eine Lösung gäbe.
Ich könnte mir vorstellen irgendwie ein JS einzubinden dass entsprechend den margin-right den document.write der CSS-Klasse überschreibt.
Ist bisher aber nur eine Idee.

Viele Grüße,

moadin

### [#67](https://www.typo3.net/d/39055-menues-basierend-auf-css/67) · MrTwister · 2006-07-24

Hi,
danke just2b für das geile HowTo.
Genau was ich vergeblich gesucht hatte.
Ich hatte mich schon bei der Templateerstellung für ein CSS basiertes Dropdown Menu entschieden.
Bei der Einbindung in Typo wurde die Liste aus den Menüeinträgen im BE einfach nicht korrekt angezeigt; bis ich auf dein HowTo gestoßen bin.
Hab dein Typoscript eingefügt und zack - JUBEL juhuhuhuuhuh - es funktioniert.

Danke dir vielmals!

Hier könnt ihr euch das Menu anschaun:
Die Seite soll später unter <http://www.inbits.de> erreichbar sein.
Momentan noch unter <http://www.inbits.de/home/index.php?id=8>

Gruß Andreas

### [#68](https://www.typo3.net/d/39055-menues-basierend-auf-css/68) · MrTwister · 2006-07-24

Nochmal hi,
das Menü funktioniert jetzt soweit allerdings habe ich noch ein kleines Problem bei der Link Formatierung in den Submenüs.
1.)
Ich würde gerne dem Linktext, zwecks css Formatierung, im <a>-Tag ein <span> Element voranstellen.
So solls aussehn:
-> <a href="#home"><span class="top_nav">Startseite</span></a>
siehe Zeile 4

Hab das mal mit linkWrap probiert, das stellt mir das <span>-Tag aber leider um das <a>-Tag ausenrum (<span><a></a></span>)

2.)
Außerdem soll beim letzten Menüpunkt das Menü weiter links dargestellt werden. Hierzu müsste ich dem letzten <ul> von den Submenüs einen anderen "style" zuweisen - aber wie über ts? siehe Zeile 9

So sollte der Quelltext aussehn:

```html
...
<li><a href="#Beispiel">Unternehmen</a>
  <ul>
    <li><a href="#Beispiel"><span class="navi-sub">Wir über uns</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
<li><a href="#Beispiel">Referenzen</a>
  <ul style="position: absolute; top: 33px; left: -76px;">
    <li><a href="#Beispiel"><span class="navi-sub">Branchen</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
...
```

Edit:
zu 1.)
Hab das ganze noch mit stdWrap getestet - bringt aber leider keine Veränderung - Zeile 23
Der Typoscript-Code sieht folgendermaßen aus:

```typoscript
subparts {
      # Ersetzen von "navigation" Dropdown Menu
    navigation = HMENU
    navigation {
      special = directory
      special.value = 2
      1 = TMENU
      1 {
        expAll = 1
        noBlur = 1
        NO = 1
        NO.wrapItemAndSub = <li>|</li>

        IFSUB = 1
        IFSUB.wrapItemAndSub = <li>|</li>
        ACTIFSUB < .IFSUB
      }
      
      2 < .1	
      2 {
        wrap = <ul>|</ul>

        # NO.stdWrap = <span class="navi-sub">|</span>

      }
      
      3 < .2
      4 < .2
    }
```

Vielleicht kann mir dabei jemand helfen - Danke
Gruß Andreas

### [#69](https://www.typo3.net/d/39055-menues-basierend-auf-css/69) · renaade · 2006-08-05

Hallo MrTwister,

was willst du denn erreichen? Ein padding-left für die Links im Untermenü? Das könntest du auch komplett über das CSS lösen, z.B.

ul#navigation li ul li a {
padding-left: 5px;
}

Ansonsten würde ich die Klasse ist das <li> schreiben, z.B. so:

2 {
        wrap = <ul>|</ul>
        NO.wrapItemAndSub = <li class="top_nav">|</li>
        }

CSS dazu:
ul#navigation li ul li.top_nav a {
/* deine Styleangaben für die Subnavi */
}

Vielleicht hilft es.

P.S. Ich benutze statt des Javascript übrigens eine .htc-Datei mit Behaviors. Hier kann man das Skript herunter laden: <http://www.xs4all.nl/~peterned/csshover.html>. Es löst ausser dem Problem mit den Klappmenüs auch noch das mit dem Farbwechsel bei CSS-Buttons. Und es funktioniert auch dann, wenn Javascript ausgeschaltet sein sollte.

### [#70](https://www.typo3.net/d/39055-menues-basierend-auf-css/70) · MrTwister · 2006-08-07

Hi,
danke erstmal für deine Antwort.

Zu 1.)
Stimmt, wegen dem padding das könnte ich auch in den link tag schreiben.
Mal schaun ob dann auch "display:block" funktioniert
-> So soll das ganze Feld anwählbar sein nicht nur der Text als Link.

Mit "display:block" im a-Tag funktioniert leider nicht. Ist auch wieder mal nur für den ie :/ Müsste also doch ein <span> außenrum.

Zu 2.)
Aber wie bekomm ich es hin nur dem letzten <ul> des listings einen anderen style zu geben?

### [#71](https://www.typo3.net/d/39055-menues-basierend-auf-css/71) · renaade · 2006-08-07

Hallo MrTwister,

gern geschehen o.O

zu 1.) Wenn das gesamte Linkfeld klickbar sein soll, muss das display:block auch in die "a"-Formatierungen.

zu 2.) Ich würde versuchen, es über eine IF-Schleife zu lösen, die den letzten Eintrag im Menü ausliest und ihm die alternative Formatierung mitgibt. Aber um das in TypoSkript umzusetzen, bin ich noch viel zu sehr Anfängerin :( .

Über die Lösung würde ich mich aber genauso freuen wie du.

Grüße, Renaade

### [#72](https://www.typo3.net/d/39055-menues-basierend-auf-css/72) · NetPartyzan · 2006-08-20

Moin Moin, hab mich jetzt ne Weile mit dem Menü beschäftigt, es angepasst, und weitere Schnipsel mit einfließen lassen.

Mein Ziel ist es, das Menu möglichst flexibel in Größe und Position erscheinen zu lassen, und desweiteren eine möglichst genaue, browserübergreifende, Darstellung zu erreichen.

Aber ein Prob. (bis jetzt) ( #evil# ) hab ich da noch!!! (Siehe Anhang)

Hab das ganze mal ein wenig dokumentiert, hier der link:
Download: <http://www.pixelcruiser.net/fileadmin/downloads/CSS-MENU.zip>

Würd mich freuen, wenn jemand das mal checkn könnte!!!
Und DEN Tip für mich hätte!!!
Vielleicht hab ich da ja auch totalen Schrott fabriziert  :'( .
Naja ganz so schlimm wirds schon net sein #giggle# .
Thx und MfG Joh  8-)

### [#73](https://www.typo3.net/d/39055-menues-basierend-auf-css/73) · MrTwister · 2006-08-23

Hi,
mmh ich hab mir alles runtergeladen und im IE version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
angeschaut.
Konnte keinen Fehler feststellen.
Wahrscheinlich ist es nur ein Darstellungsfehler vom IE 7.
Soviel ich weiß befindet sich der IE 7 sowieso noch in der Beta!?

@renaade
bin leider auch noch Anfänger was typoscript betrifft. Hab mich dazu entschieden den letzten Menüpunkt doch erstmal unverändert anzuzeigen. So schlimm siehts ja net aus  o.O

### [#74](https://www.typo3.net/d/39055-menues-basierend-auf-css/74) · p4tent · 2006-08-24

hallo alles zusammen,

ich kam heute nacht in den genuss diesen wundervollen thread aufzustöbern, der auf einmal mehr oder weniger alle meine probleme löst, da das genau das ist, was ich gesucht habe 8-)  :D

ein kleines problem bzw. eine frage:

ich hab im hintergrund des menüs ein bild, will dem menü aber auch eine hintergrundfarbe geben --> transparenz..
es stellt sich die frage wie ich in das menü transparenz bekomme, worauf ich nach etwas stöbern diesen quellcode fand

```typoscript
style: -moz-opacity:0.5; filter:alpha(opacity=50);
```

ich weiß, dass das nicht das gelbe vom ei ist, aber ich dachte es genügt mir erst mal...

das problem ist jetzt, nachdem ich den code testweise an verschieden stellen im menü eingefügt habe, dass meistens die 3. ebene nicht mehr angezeigt wird  #angry#
woran kann das liegen?
würd mich freuen wenn mir jemand helfen kann, bzw. mir einfach die zeile an der richtigen stelle einfügt..

vielen dank

gruß p4tent

### [#75](https://www.typo3.net/d/39055-menues-basierend-auf-css/75) · just2b · 2006-08-24

Hallo,

nun man kann wohl nur so pauschal antworten: Es liegt an deinem CSS

lg georg

### [#76](https://www.typo3.net/d/39055-menues-basierend-auf-css/76) · p4tent · 2006-08-24

ja, dass es am css liegt, ist klar...aber es ist nicht mein css sondern das css (quasi unverändert) von dem vertikalen menü..ich hatte gehofft, dass du mir als ersteller da weiterhelfen kannst..

gruß p4tent

### [#77](https://www.typo3.net/d/39055-menues-basierend-auf-css/77) · just2b · 2006-08-24

> **p4tent schrieb:**
>
> ja, dass es am css liegt, ist klar...aber es ist nicht mein css sondern das css **(quasi unverändert)** von dem vertikalen menü..ich hatte gehofft, dass du mir als ersteller da weiterhelfen kannst..
>
> gruß p4tent

sorry aber ich kann nicht raten! unverändert funktionierts und was DU geändert hast kann ich mir niht aus den fingern saugen! stell ein Bsp online und dann kann mans auch anschaun und helfen...  #angry#

georg

### [#78](https://www.typo3.net/d/39055-menues-basierend-auf-css/78) · p4tent · 2006-08-24

die css-datei ist unverändert, mit der einzigen ausnahme, dass ich im body den hintergrund rausgenommen habe, alles andere ist absolut identsich...alles was ich wissen will, ist wo ich die transparenz einfügen muss, ohne dass die dritte ebene nicht mehr angezeigt wird.
danke

### [#79](https://www.typo3.net/d/39055-menues-basierend-auf-css/79) · p4tent · 2006-08-24

```typoscript
body { 
	font-family: verdana, arial, helvetica, serif;
	font-size: 62.5%;
	color: black;
                
	
}
 


ul#nav,
ul#nav ul { 
	margin: 0;
	padding: 0;
	width: 150px; /* Width of Menu Items */
	border-bottom: 0px solid #000;
                border-right: 0px solid #000;
                frame:below;
	background: #646461; /* IE6 Bug */
	color: black;
	font-size: 10px;
***********************************************
*     style: -moz-opacity:0.8; filter:alpha(opacity=80);
***********************************************             
	}
 
ul#nav li {
	position: relative;
	list-style: none
              }
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #d2d2d2;
	padding: 5px;
	border: 0px solid #000;
	border-bottom: 1px solid #000;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
                
	}


ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block;} /* The magic */
 
ul#nav li.menuparent { background: transparent url(pfeil.gif) right center no-repeat;}

 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	/*background-color: #f9f9f9; */
                background-color: #646461; 
}
 
 
ul#nav li a:hover { 
	color: #FFF; 	

/*Transparenz:    style: -moz-opacity:0.5; filter:alpha(opacity=50);*/
}
```

hallo just2b,
das ist der code. wenn ich jetzt wie hier gekennzeichnet die transparenz einfügen will, werden nur noch die erste und zweite menüebene angezeigt, alle weiteren nicht. vielleicht fällt dir auf, was ich die ganze zeit überseh..

viele grüße und danke
p4tent

### [#80](https://www.typo3.net/d/39055-menues-basierend-auf-css/80) · reetosh · 2006-08-28

Hallo just2b

Zuerst einmal vielen Dank für Dein Howto, einfach Spitze !!!

Hast Du schon eine Zeitverzögerung (beim verlassen mit der Maus) eingebunden?
Wenn ja wäre ich froh für einen Tipp.

THX

Grüsse,
reetosh

### [#81](https://www.typo3.net/d/39055-menues-basierend-auf-css/81) · Cooba · 2006-08-30

Tagchen erstmal.

Habe mir auch das sehr gute horizontale Dropdown-Menü von Just2b gegönnt. Ich habe es jedoch mit Templa Voilà eingebunden und nicht mit Marks, sowie die meisten hier. Leider will sich das Menü partout nicht ausklappen. Kann euch leider keinen Link geben, da das ganze ein Intranet Server ist.

Der Typoscript Code ist wie folgt:

```typoscript
lib.menu_1 = HMENU 
		
lib.menu_1.1 = TMENU
lib.menu_1.1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	lib.menu_1.2 < .1	
	lib.menu_1.2.wrap = <ul>|</ul>

	lib.menu_1.3 < .2
	lib.menu_1.4 < .2
	




page = PAGE

page.typeNum = 0

page.10 = USER

page.10.userFunc = tx_templavoila_pi1->main_page
```

Das Javascript und die css Datei sind beide direkt im Web-Template Header drin, der über Templa Voilà direkt eingebunden wurde.

Hab ich irgendetwas vergessen oder nicht beachtet ? Vielleicht hänge ich schon zu lange davor und sehe den Wald vor lauter Bäumen nicht mehr :o

Danke schon mal im voraus :)

### [#82](https://www.typo3.net/d/39055-menues-basierend-auf-css/82) · p4tent · 2006-08-30

Hallo,

ich habe mich jetzt nochmal mit meinem Problem beschäftigt, dass das Menü, wenn ich es transparent mache, nicht mehr richtig funktioniert. ich konnte es nach wie vor nicht lösen, hoffe aber, dass mir doch noch einer von euch helfen kann:

zunächst mal mein setup:

```typoscript
NAV_L = HMENU
                 NAV_L {
	            1 = TMENU
	            1 {
		expAll = 1
		wrap = <ul id="nav" style="filter:Alpha(opacity=80, finishopacity=0, style=0)">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	             }
	            2 < .1
                            2.wrap= <ul>|</ul>
                            3 < .2
                            4 < .2
}
```

Füg ich die Zeile "style="filter:Alpha(opacity=80, finishopacity=0, style=0)"" wie hier im beispiel in das erste tmenu ein, wird nur die erste anzeige durchsichtig, alle anderen die ausklappen sind nicht durchsichtig.
füge ich jetzt im 2. tmenu bei wrap die selbe zeile ein, werden die erste und die zweite ebene durchsichtig, aber alle weiteren werden nicht angezeigt. lasse ich dagegen die 2. ebene normal und füge den wrap erst beim 3. tmenu ein, wird nur noch die 4. ebene nicht angezeigt und in der zweiten passiert natürlich nichts. ich bin ziemlich am verzweifeln, weil ich nicht weiß was ich tun soll. der vollständigkeit halber füge ich noch die css datei mit an:

css:

```typoscript
body { 
	font-family: verdana, arial, helvetica, serif;
	font-size: 62.5%;
	color: black;
                
	
}
 


ul#nav,
ul#nav ul { 
	margin: 0;
	padding: 0;
	width: 150px; /* Width of Menu Items */
	border-bottom: 0px solid #000;
                border-right: 0px solid #000;
                frame:below;
	background: #646461; /* IE6 Bug */
	color: black;
	font-size: 10px;
                
              	}
 
ul#nav li {
	position: relative;
	list-style: none
              }
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #d2d2d2;
	padding: 5px;
	border: 0px solid #000;
	border-bottom: 1px solid #000;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
                
	}


ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block;} /* The magic */
 
ul#nav li.menuparent { background: transparent url(pfeil.gif) right center no-repeat;}

 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	/*background-color: #f9f9f9; */
                background-color: #646461; 
}
 
 
ul#nav li a:hover { 
	color: #FFF; 	

/*Transparenz:    style: -moz-opacity:0.5; filter:alpha(opacity=50);*/
}
```

bin für jede hilfe dankbar.

viele grüße
p4tent

### [#83](https://www.typo3.net/d/39055-menues-basierend-auf-css/83) · rpretory · 2006-08-31

> **just2b schrieb:**
>
> > **AndyKöln schrieb:**
> >
> > Wäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.
>
> IMHO nicht, wiel du ja ein display:block brauchst

ob bei diesen menu geht weis ich nicht habe den ganzen code nicht gelesen, der aufbau scheint gleich zu sein.
bei meinen setzte ich den wert:

with: 10px für ie
with: 100% für fox

mit typoscipt als cssimport
ein padding-left + right für einen schönen abstand

#nav a {
	padding-top: 0px;
	line-height: 18px;
	/*width: 100%;   import!*/
	height: 18px;
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	overflow: inherit;
}

somit stellt sich mein menu auf die länge ein!

LG
roman

### [#84](https://www.typo3.net/d/39055-menues-basierend-auf-css/84) · vpipe · 2006-09-01

Hallo!

Ich versuche seit einiger Zeit vergeblich, das Menü richtig zum laufen zu bekommen. Es wird zwar angezeigt, jedoch nur die erste Menüebene. Die Unterpunkte, die beim drüberhovern aufklappen sollten, erscheinen nicht.

Wisst ihr, woran das liegen könnte?

Die Seitenstruktur sieht so aus:
-Root (Shortcut auf Home)
---Menü oben (Shortcut auf Home)
------Home
------Kontakt
------Impressum
---Menü links (Shortcut auf Home)
------Punkt1
------Punkt2
---------Unterpunkt2.1
---------Unterpunkt2.2
------Punkt3
------Punkt4
---------Unterpunkt4.1

Code wie folgt:

```typoscript
LEFT_NAV = HMENU
LEFT_NAV {
                	special = directory
        special.value = 2
        1 = TMENU
        1 {
                expAll = 1
                wrap = <ul id="nav">|</ul>
                noBlur = 1
                NO = 1
                NO.wrapItemAndSub = <li>|</li>
                IFSUB = 1
                IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
                ACTIFSUB < .IFSUB
        }
        2 < .1 
        2.wrap = <ul>|</ul>
        3 < .2
        4 < .2
		  
	
              }
```

Ich hoffe ihr könnt mir helfen!

Viele Grüße,
Verena

### [#85](https://www.typo3.net/d/39055-menues-basierend-auf-css/85) · astrula · 2006-09-11

Hallo,

ich habe nach langen anderen Versuchen nun auf diese Superarbeit von Just2b zurückgegriffen. Wunderbar mit notwendigen Änderungen funktioniert das Menu (vertikal) mit allen Browsern, außer natürlich Explorer!
Und ich werde demnächst verrückt, finde einfach nicht den Punkt.
Javascript+Css sind direkt in der HTML-Vorlage eingebunden, da ich TemplaVoilà verwende.
Besichtigen kann man mein Menu: <http://www.lesablier-editions.com>
Und hier mein CSS:

```html
ul#nav,
ul#nav ul {
	margin: 0;
	padding: 0;
	width: 145px; /* Width of Menu Items */
	background: transparent; /* IE6 Bug */
	}
 
ul#nav li {
	position: relative;
	top: 250px;
	left: 5px;
	list-style: none;
	}
 
ul#nav li a {
	display:block; 
text-decoration:none;
font-size: 85%;
height:20px;
line-height:20px;
width:144px;
color:#000;
background: transparent;
text-indent:5px;
	}

ul#nav li a:hover{
color:#fff;
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 140px; /* Set 1px less than menu width */
	top: -255px;
	}
 
ul#nav li ul li a { padding: 1px 0;
	background: #CA3232;
	} /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { 
display: block; } /* The magic */
ul#nav li.menuparent { background: transparent url(../images/arrow.gif) right center no-repeat; }
 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	background-color: #CA3232; 
}
```

Kann mir jemand vielleicht weiterhelfen??
Danke im Voraus,
Astrid

### [#86](https://www.typo3.net/d/39055-menues-basierend-auf-css/86) · just2b · 2006-09-11

Hallo Astrid,
mach doch mal schnell eine quicktest: original css + ts von mir, funktioniert dann das submenü?

georg

### [#87](https://www.typo3.net/d/39055-menues-basierend-auf-css/87) · astrula · 2006-09-12

Hallo Georg,

hatte den Test schon gemacht, funktioniert wunderbar...

Astrid

### [#88](https://www.typo3.net/d/39055-menues-basierend-auf-css/88) · just2b · 2006-09-12

dann liegt der fehler da wo du was geändert hast.. schritt für schritt ändern und kontrolliern, dann findest den fehler schnell

viel erfolg
georg

### [#89](https://www.typo3.net/d/39055-menues-basierend-auf-css/89) · astrula · 2006-09-12

Habe es jetzt nocheinmal mit deinem Original versucht - funktioniert auch nicht, hatte mich getäuscht. Ist zum verrückt werden.
Momentan habe ich es noch auf meiner Webside.
Was das wohl sein kann??
Astrid

### [#90](https://www.typo3.net/d/39055-menues-basierend-auf-css/90) · just2b · 2006-09-12

Es liegt an

```html
<SCRIPT type=text/javascript>
     window.onload=function(){
     Nifty("#menu a","transparent");
     }
  </SCRIPT>
```

lg georg

### [#91](https://www.typo3.net/d/39055-menues-basierend-auf-css/91) · astrula · 2006-09-12

Vielen Dank erstmal für die Mühe!
Jetzt habe ich transparent aus dem Script rausgenommen, aber es funktioniert immer noch nicht...

### [#92](https://www.typo3.net/d/39055-menues-basierend-auf-css/92) · just2b · 2006-09-12

> **astrula schrieb:**
>
> Vielen Dank erstmal für die Mühe!
> Jetzt habe ich transparent aus dem Script rausgenommen, aber es funktioniert immer noch nicht...

zeile 40-44 is noch immer drinnen und wenn du die seite mal lokal speicherst, das raus nimmst, dann wirst sehen dass es an dem liegt

georg

### [#93](https://www.typo3.net/d/39055-menues-basierend-auf-css/93) · astrula · 2006-09-12

Jawohl, das funktioniert!
Natürlich habe ich so ein kleines Problem mit meinem Menu oben, es ist nicht mehr so gut, wenn ich drübergleite...
Trotzdem vielen Dank!
Astrid

### [#94](https://www.typo3.net/d/39055-menues-basierend-auf-css/94) · Elfenkind · 2006-09-13

Hallo,
hab es bei mir auch grad eingebaut, funktioniert auch einwandfrei *lob*

Nun hätte ich nur noch eine Frage...
Gibt es eine Möglichkeit die Linklänge anzupassen? Hab das horizontale eingebaut.

Also z.b. das bei dem Link "Link" die farbhinterlegung kürzer ist wie bei dem Link  "zweiterlink" das sich die Breite automatisch der Linklänge anpasst bzw. das man die Breite einzeln bestimmen kann?

lg

### [#95](https://www.typo3.net/d/39055-menues-basierend-auf-css/95) · just2b · 2006-09-13

Hallo,

du kannst global die Linklänge bestimmen, via CSS, aber nicht für einen Menüpunkt einzeln

lg georg

### [#96](https://www.typo3.net/d/39055-menues-basierend-auf-css/96) · Elfenkind · 2006-09-13

Wo man die linklänge allg. verkleinern / vergrößern kann hab ich schon gefunden ;)

schade das es nicht einzeln geht, sind halt teilweise gute lücken drin...

also z.b.:

Linknametest (kleiner Abstand) Linknametest (kleiner Abstand) Linknametest (kleiner Abstand) Link   (großer Abstand)              Link   (großer Abstand)        Linkname  usw...

und das kann man nicht irgendwie anders noch lösen?

lg

### [#97](https://www.typo3.net/d/39055-menues-basierend-auf-css/97) · just2b · 2006-09-13

du könntest vielleicht mit optionsplit (siehe tsref) noch zusätzliche style-tags einbringen und dann damit stylen, das könnte klappen, hab ich aber noch nie ausprobiert

lg georg

### [#98](https://www.typo3.net/d/39055-menues-basierend-auf-css/98) · theschaaf · 2006-09-13

```typoscript
seite = PAGE
seite {
   typeNum = 0
   bodyTag = <body bgColor = "#FFFFFF">
   stylesheet = fileadmin/dummyfiles/style.css
   meta.AUTHOR = Jens
   meta.DESCRIPTION = Homepage der CKS Systeme
   
   headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/dummyfiles/horizontal_JS.js"></script>

   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/dummyfiles/template_2.html
   10.workOnSubpart = DOKUMENT
   10.marks {

MENU_OBEN = HMENU
MENU_OBEN {
	special = directory
	special.value = 850

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
}
```

Bei mir kommt gar nichts,
was hab ich da falsch gemacht? Die Dateien sind alle an dem Ort wo sie hingehöhren, also die Pfade stimmen, hab ich vll einen Teil des TS an der falschen Stellen eingebunden?

Bei mir erscheint unten Links im IE auch immer eine Fehlermeldung, also so ein gelbes Dreieck mit Ausrufungszeichen??

danke auch schonmal für die Bereitstellung der Daten

gruß, theschaaf

### [#99](https://www.typo3.net/d/39055-menues-basierend-auf-css/99) · just2b · 2006-09-13

die Seite mit der ID 850 gibts? da fängt das Menü nämlich an

georg

### [#100](https://www.typo3.net/d/39055-menues-basierend-auf-css/100) · theschaaf · 2006-09-13

danke  :)

ziemlich geil ich habs tatsächlich hinbekommen, das hätte ich nicht gedacht, und auf den kleinen fehler sollte ich auch selber kommen.

naja, beim horizontalen menü stehen die felder immer noch untereinander, vertikal klappt es gut.

ich könnte mir nur denken das da irgendwo ein zeilenumbruch drin ist, aber den müsste ich, wenns denn so wäre, da ja stehen haben?!

schaaf

----------

alles klaro, fehler selber gefunden, besten dank 8-)

---

Quelle: „Menüs basierend auf CSS“, typo3.net, https://www.typo3.net/d/39055-menues-basierend-auf-css
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.

Weiter: [Seite 2 von 2](https://www.typo3.net/d/39055-menues-basierend-auf-css.md?page=2)
