---
title: "barrierefreies 2 Ebenen Menü"
url: "https://www.typo3.net/d/23336-barrierefreies-2-ebenen-menue"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS"]
created: "2005-04-07"
last_reply: "2005-04-26"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# barrierefreies 2 Ebenen Menü

Frontend › Barrierefreiheit · 1 Antwort · gestartet 2005-04-07

## Eröffnungsbeitrag

**Cre8tive** · 2005-04-07 · [Beitrag #1](https://www.typo3.net/d/23336-barrierefreies-2-ebenen-menue/1)

Aloa!

Würde gerne ein barrierefreies Menü mit 2 (oder mehreren Ebenen) gestalten.

Das Menü muss / soll ja als Liste angelegt werden.
Das Problem ist nur, sobald ein Unterpunkt eine neue Unterebene hat, müsste innerhalb dieses Listenpunktes eine neue Liste mit der nächstenen Ebene erscheinen:

```html
<ul> 
<li> EBENE1.Link1</li> 
<li> EBENE1.Link2 
       <ul> 
              <li>EBENE2.Link1</li> 
              <li>EBENE2.Link2</li> 
       </ul> 
       </li> 
<li>EBENE1.Link3</li> 
</ul>
```

Ich bekomme es nicht hin, dass - wenn es eine 2. ebene gibt - das listenelement erst danach geschlossen wird.
habe es auch schon mit IFSUB probiert, aber dann überlagert die ACT eigenschaft, die IFSUB eigenschaft.

Dazu habe ich auch verschiedenes ausprobiert, aber alles hat nicht richtig funktioniert:

Die lösung funktioniert zwar technisch, ist asber nicht valide:

```typoscript
temp.nav_sub = HMENU 
temp.nav_sub.entryLevel = {$menu_entry} 


temp.nav_sub.1 = TMENU 
temp.nav_sub.1.wrap = <ul  class="menue_sub_ebene1">|</ul> 
temp.nav_sub.1 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub">|</li> 

                               ACT = 1 
                               ACT.allWrap = <li  class="menue_sub_act">|</li> 
                               } 

temp.nav_sub.2 = TMENU 
temp.nav_sub.2.wrap = <ul class="menue_sub_ebene2">|</ul> 
temp.nav_sub.2 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub2">|</li> 
                                ACT = 1 
                                ACT.allWrap = <li class="menue_sub2_act">|</li> 
                               }
```

Der zweite Versuch.
Dachte so könnte es klappen, aber irgendwie setzt ACT noch das < /li > dahinter - trotz des IFSUB. Ausserdem passt das mit den Farbzuordnungen dann nicht, denn der Unterpunkt soll ja nur seine Farbe wechseln wenn aktiv. Ausserdem fehlt dann auch ein abschließendes < /li >, wenn die 2. Ebene nicht ausgeklkappt ist.

```typoscript
temp.nav_sub = HMENU 
temp.nav_sub.entryLevel = {$menu_entry} 


temp.nav_sub.1 = TMENU 
temp.nav_sub.1.wrap = <ul  class="menue_sub_ebene1">|</ul> 
temp.nav_sub.1 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub">|</li> 

                               ACT = 1 
                               ACT.allWrap = <li  class="menue_sub_act">|</li> 

                               IFSUB = 1 
                               IFSUB.allWrap = <li  class="menue_sub_act">| 
                               } 

temp.nav_sub.2 = TMENU 
temp.nav_sub.2.wrap = <ul class="menue_sub_ebene2">|</ul></li> 
temp.nav_sub.2 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub2">|</li> 
                                ACT = 1 
                                ACT.allWrap = <li class="menue_sub2_act">|</li> 
                               }
```

3. Versuch.
Ich dachte mir, so müsste es funktionieren. aber trotzdem überlagert das normale ACT den ACT.IFSUB wrap. Ausserdem wird im IE das Untermenü in der falschen Farbe angezeigt (die der ersten Ebene, woh weil der < li >- tag nicht zu ist), im Firefox geht es aber. Das könnte man zur not, aber hoffentlich noch mit dem z-index regeln.

```typoscript
temp.nav_sub = HMENU 
temp.nav_sub.entryLevel = {$menu_entry} 


temp.nav_sub.1 = TMENU 
temp.nav_sub.1.wrap = <ul  class="menue_sub_ebene1">|</ul> 
temp.nav_sub.1 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub">|</li> 

                               ACT = 1 
                               ACT.allWrap = <li  class="menue_sub_act">|</li> 

                               ACT.IFSUB = 1 
                               ACT.IFSUB.allWrap = <li  class="menue_sub_act">| 
                               } 

temp.nav_sub.2 = TMENU 
temp.nav_sub.2.wrap = <ul class="menue_sub_ebene2">|</ul></li> 
temp.nav_sub.2 { 
                                expAll = 0 
                                NO.allWrap = <li class="menue_sub2">|</li> 
                                ACT = 1 
                                ACT.allWrap = <li class="menue_sub2_act">|</li> 
                               }
```

Nebenbei gefragt, damit habe ich mich noch gar nicht beschäftigt, wüsste auch keinen Ansatz:
Gibt es eine Möglichkeit automatisch < dfn> - Tags vor das Menü zu genieren, bei dem die Zahlen dann automatisch zugeordnet werden?
Die könnte man dann ja ausblenden, aber ich wüsste nicht wie man die Zahlen je nach Ebene und Reihenfolge richtig generiert.
Siehe hier:
<http://www.einfach-fuer-alle.de/artikel/menues/tag2/>

Wenn das alles zusammen wär, gäbs dann einen tollen Code für ein barrierefreies Typo - Menü

## Antworten

### [#2](https://www.typo3.net/d/23336-barrierefreies-2-ebenen-menue/2) · Michl · 2005-04-26

1.) in der Online Doku zu MTB/1 auf typo3.org gibt es einen Eintrag bei 1.3.6 Creating the menu:

```typoscript
Date: 07-04-2004 03:41 by xlerb
Menu as unordered list

Though the sample menu might be designed cleverly to be easily formatted with CSS it is not the best design when it comes to accessibility. Try and view the sample page without the stylesheet to get a feeling for what a blind person will get (from a screen reader): the tree structure of the site/menu is lost, because every menu entry is a similar DIV, different only in the CSS class, but shown identical without styling.

A better aproach is formatting the menu as an un/ordered list in XHTML, thus revealing the structure of the site even without any stylesheet. See sample code below.

Code Listing:

# Construct the main menu as a nested unordered list.
# It has level1 and level2 entries.
# All formatting will be done via CSS.
temp.menu1 = COA
temp.menu1 {
    # the menu object itself, starting off the site root
  10 = HMENU
  10.entryLevel = 0


    # Level1 entries are simple text menu entries,
    # (formatted via CSS to run down the left side of the page)
  10.1 = TMENU
  10.1 {
      # Don't really like unneccessary scripting.
    noBlur = 1
      # Current item should be unlinked and formatted differently.
    CUR = 1
      # Active items above current item should be formatted differently.
    ACTIFSUB = 1
  }

    # Base formatting of menu entries as list items.
  10.1.NO {
    wrapItemAndSub = <li class="menu1-lev1-no">|</li>
    ATagParams =
  }

    # Current menu item is unlinked and marked
  10.1.CUR {
    wrapItemAndSub = <li class="menu1-lev1-cur">|</li>
    doNotLinkIt = 1
  }

    # Active items above current to be formatted differently
  10.1.ACTIFSUB {
    wrapItemAndSub = <li class="menu1-lev1-act">|</li>
  }

    # Wrap the level1 menu inside an unordered list
  10.1.wrap = <ul class="menu1-lev1">|</ul>


    # Level2 entries are simple text menu entries also,
    # (formatted very differently via CSS to run left to right
    # across the page under the header, so you only see the styling
    # classes here.)
  10.2 = TMENU
  10.2 {
    noBlur = 1
    CUR = 1
    ACTIFSUB = 1
  }

    # Same formatting of menu entries as list items.
  10.2.NO {
    wrapItemAndSub = <li class="menu1-lev2-no">|</li>
    ATagParams =
  }

    # Current menu item is unlinked and marked too
  10.2.CUR {
    wrapItemAndSub = <li class="menu1-lev2-cur">|</li>
    doNotLinkIt = 1
  }

    # Active items above current to be formatted differently as for level1
  10.2.ACTIFSUB {
    wrapItemAndSub = <li class="menu1-lev2-act">|</li>
  }

    # Wrap the level2 menu inside an unordered list
  10.2.wrap = <ul class="menu1-lev2">|</ul>
}
```

2.) Im Linux Magazin Sonderheft 2/2005 gibt es einen Workshop "Barrierefreie Website mit Typo3" von Andreas Schwarzkopf. Er zeigt dort auch ein Listing für ein Menü mit verschachtelten XHTML Listenelementen.

Gruss
Michl

---

Quelle: „barrierefreies 2 Ebenen Menü“, typo3.net, https://www.typo3.net/d/23336-barrierefreies-2-ebenen-menue
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.