[TYPO3-german] Menü Zustände

Wed Aug 22 14:22:24 CEST 2007

Hallo Jochen,

das
       <span class="current"><a href="#">home</a></span>
       <a href="#">links</a>
       <a href="#">blog</a>
       <a href="#">contact</a>
       <a href="#">links</a>
       <a href="#">blog</a>
       <a href="#">contact</a>
ist nicht statisch, sondern wird von Typo selber generiert. Du kannst 
Elementen im TS IDs/Klassen zugewisen (das machst Du ja auch). Diese 
muss man einfach in einer CSS-Datei definieren und anschließend einen 
Verweis auf diese Datei in die Seite einbinden:

mainPage = PAGE
mainPage {
    typeNum = 0
    bodyTag = <body id="bodytag">

    includeCSS {
        css_ = fileadmin/template/txt/css_.css
    }
}

Gruß,
Ilya

Jochen Graf wrote on 22.08.2007 13:25
> Hallo Liste,
>
> ich bin gerade dabei ein TMENU zu erstellen. "Horizontal"
> Da mir noch etwas das Verständnis fehlt suche ich eine Doku.
>
> TYPO3 TMENU mit CSS.
>
> Ich habe mir ein Menü erstellt und per CSS Formatiert.
>
> <div class="menu">
>    <!-- ###MENU### begin -->
>        <span class="current"><a href="#">home</a></span>
>        <a href="#">links</a>
>        <a href="#">blog</a>
>        <a href="#">contact</a>
>        <a href="#">links</a>
>        <a href="#">blog</a>
>        <a href="#">contact</a>
>    <!-- ###MENU### end -->
>    </div>
>
>
> Nun möchte ich, dass das Menü mir verschiedene Zustände anzeigt.
>
> Bisher habe ich mein Menü mit Hilfe von Typoscript ansprechen können
> temp.basicMenu = HMENU
> temp.basicMenu {
>   wrap = <div class="menu">|</div>
>   special = directory
>   special.value = 1
>   1 = TMENU
>   1 {
>      expAll = 1
>      wrap = <ul>|</ul>
>      NO = 1
>      NO {
>              linkWrap = &nbsp;|
>
> }
>    }
>
> Aber ich verstehe leider noch nicht ganz den Zusammenhang, bzw. was 
> muss ich bei dem Menü im CSS berücksichtigen, damit ich verschiedene 
> Zustände per Typo3script ausgeben lassen kann.?
>
> ACT CUR IFSUB
>
> Dokus zu Menüs konnte ich finden, aber nicht in Verbindung mit CSS.
>
> .menu {
>      margin-top:10px;
>    padding: 0 0 2px 20px;
>    border-bottom: 2px solid #006fa7;
> }
> .menu a {
>        padding: 2px 10px 2px 10px;
>    border: 1px solid #003399;
>    border-bottom: 0;
>    background-color: #FFCC99 ;
>    text-decoration: none;
>    color: #006fa7;
>    background-image: url(menu_bg.png);
> }
> .menu a:hover {
>    padding: 2px 10px 7px 10px;
>    border: 1px solid #696969;
>    border-bottom: 0;
>    background-color: #f3f2da;
>    text-decoration: none;
>    color: #444;
>    background-image: url(menu_bg.png);
> }
> .menu .current a {
>    padding: 2px 10px 7px 10px;
>    border: 1px solid #FFCC99 ;
>    border-bottom: 0;
>    background-color: #fff;
>    text-decoration: none;
>    color: #ffffff;
>    background-image: url(menu_bg.png);
> }
> .menu .current a:hover {
>    padding: 2px 10px 7px 10px;
>    border: 1px solid #696969;
>    border-bottom: 0;
>    background-color: #fff;
>    text-decoration: none;
>    color: #ffffff;
> }
>
>
>
>
>
>
>
> Danke
>
>
>