Zum Inhalt springen

Button mit CSS/TS aktiv setzen geht nicht (YAML vlist)

Erstellt am 9. März 2011 · 1 Antwort · letzte Antwort am 10. März 2011

Tags: HTML & CSS, Frage

mecki ·

Hallo!

Wir sitzen gerade an einem vertikalen Listenmenü mit 3 Ebenen und haben dafür von YAML die vlist.css verwendet. Die Verbindung mit Typoscript klappt noch nicht, die aktiven Buttons der 2. und 3. Ebene werden nicht aktiv dargestellt.
Nach 20 Versuchen völlig verzweifelt...

Wir benutzen Typo3 4.4.4 mit TemplaVoila und YAML.

/* Submenü */
@media all
{
  .vlist {
    width:100%;
    overflow:hidden;
    margin:0 0 1.5em 0;
    list-style-type:none;
    border-top:3px #ddd solid;
    border-bottom:2px #ddd solid;
    /* Schriftgröße und -art gesamte Subnavi */
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:1.1em;
  }

  .vlist ul {
    list-style-type:none;
    margin:0;
    padding:0;
  }

  .vlist li {
    float:left; /* LTR */
    width:100%;
    margin:0;
    padding:0;
  }

  .vlist a,
  .vlist strong,
  .vlist span {
    display:block;
    padding:3px 0px 3px 10%;
    text-decoration:none;
    border-bottom:1px #ddd solid;
  }

  .vlist a,
  .vlist a:visited {
    color:#333;
  }

  .vlist li span {
    display:block;
    font-weight:bold;
    border-bottom:1px #ddd solid;
  }

  /* active list element */
  .vlist li.active {
    color:#333;
    background-color:#ebf4d2;
    font-weight:bold;
  }

  /* Level 1 */
  .vlist li a,
  .vlist li strong,
  .vlist li span { width:90%; padding-left:10%; } /* LTR */

  .vlist li a:focus,
  .vlist li a:hover,
  .vlist li a:active { background-color:#ebf4d2; color:#333; outline: 0 none; }

  /* Level 2 */
  .vlist li ul li a,
  .vlist li ul li strong,
  .vlist li ul li span { width:80%; padding-left:20%; } /* LTR */

  .vlist li ul li a, 
  .vlist li ul li a:visited { background-color:#fff; color:#333; }
  .vlist li ul li a:focus,
  .vlist li ul li a:hover,
  .vlist li ul li a:active { background-color:#ebf4d2; color:#333; }

  /* Level 3 */
  .vlist li ul li ul li a,
  .vlist li ul li ul li strong,
  .vlist li ul li ul li span { width:70%; padding-left:30%; } /* LTR */

  .vlist li ul li ul li a,
  .vlist li ul li ul li a:visited{ background-color:#fff; color:#333; }
  .vlist li ul li ul li a:focus,
  .vlist li ul li ul li a:hover,
  .vlist li ul li ul li a:active { background-color:#ebf4d2; color:#333; }

}

# Submenü

lib.submenu = HMENU
lib.submenu {
  # den Titel in H3-Überschrift einfügen
  stdWrap.required = 1
  stdWrap.prepend = TEXT
  stdWrap.prepend {
    wrap = <h3>|</h3>
    data = leveltitle:2
  }
  special = directory
  # Einstiegslevel (eventuell verändern!)
  entryLevel = 2
  # Referenz zur Hauptmenüseite (damit das richtige Submenü angezeigt wird)
  # (eventuell Zahl verändern!)
  special.value.data = leveluid:2
  # erste Ebene des Submenüs (= 2. Ebene insgesamt)
  1 = TMENU
  1 {
    # 3. Ebene immer bei allen anzeigen (wenn nicht gesetzt,
    # wird 3. Ebene nur angezeigt, wenn zugehörige 2. Ebene aktiv)
    expAll = 0
    # gesamtes Submenü umschliessen mit:
    wrap = <ul class="vlist">|</ul>
    # einzelnen Menüpunkt umschliessen mit:
    NO {
      #allWrap = <li>|</li>
      wrapItemAndSub = <li>|</li>
      ATagTitle.field = title
      stdWrap.htmlSpecialChars = 1
      # dem Menüpunkt-Link folgende Klasse zuweisen (CSS Formatierung)
      #ATagParams = class=""
    }
    ACT = 1
    ACT {
      ATagTitle.field = title
      #allWrap = <li class="active">|</li>
      wrapItemAndSub = <li class="active">|</li>
      stdWrap.htmlSpecialChars = 1
      #ATagParams = class=""
    }
    CUR = 1
    CUR {
      ATagTitle.field = title
      wrapItemAndSub = <li class="active">|</li>
      stdWrap.htmlSpecialChars = 1    
    }
  }
}

# zweite Ebene des Submenüs (= 3. Ebene insgesamt)
lib.submenu.2 = TMENU
lib.submenu.2 {
  # gesamtes Submenü umschliessen mit
  wrap = <ul class="vlist">|</ul>
  NO {
    #allWrap = <li class="">|</li>
    wrapItemAndSub = <li>|</li>
    ATagTitle.field = title
    stdWrap.htmlSpecialChars = 1
    #ATagParams = class=""
  }
  ACT = 1
  ACT {
    ATagTitle.field = title
    #allWrap = <li class="active">|</li>
    wrapItemAndSub = <li class="active">|</li>
    stdWrap.htmlSpecialChars = 1
    #ATagParams = class=""
  }
   CUR = 1
   CUR {
      ATagTitle.field = title
      wrapItemAndSub = <li class="active">|</li>
      stdWrap.htmlSpecialChars = 1    
    }
}

# dritte Ebene des Submenüs (= 4. Ebene insgesamt)
lib.submenu.3 = TMENU
lib.submenu.3 {
  # gesamtes Submenü umschliessen mit
  wrap = <ul class="vlist">|</ul>
  NO {
    #allWrap = <li class="">|</li>
    wrapItemAndSub = <li>|</li>
    ATagTitle.field = title
    stdWrap.htmlSpecialChars = 1
    #ATagParams = class=""
  }
  ACT = 1
  ACT {
    ATagTitle.field = title
    #allWrap = <li class="active">|</li>
    wrapItemAndSub = <li class="active">|</li>
    stdWrap.htmlSpecialChars = 1
    #ATagParams = class=""
  }    
  CUR = 1
  CUR {
      ATagTitle.field = title
      wrapItemAndSub = <li class="active">|</li>
      stdWrap.htmlSpecialChars = 1    
    }
}

http://www.bauphase.biz

So soll es aussehen:

Für Hilfe oder Tipps wären wir sehr dankbar!

soll.jpg