Zum Inhalt springen

freecssdropdown mit unterschiedlichen Klassen bei UL

Erstellt am 15. September 2010 · 2 Antworten · letzte Antwort am 22. September 2010

Tags: HTML & CSS, Frage

Unbekannter Benutzer ·

Hallo,

ich baue gerade ein freecssdropdown-Menü um. Es handelt sich um ein TMENU mit zwei Ebenen welches bei der ersten und zweiten Ebene horizontal angeordnet ist. Ich möchte hierbei immer die zweite Ebene auf der sich die gerade aktive Seite befindet eingeblendet lassen wegen der Usability. Wenn der Mauszeiger aber über einen anderen Menüpunkt der ersten Ebene geht, soll von diesem Menüpunkt die zweite Ebene eingeblendet werden (über der gerade aktiven Ebene). Dazu habe ich einfach verschiedene Klassen vergeben und diese über CSS formatiert. Klappt auch eigentlich...

Einziger Punkt ist, das der z-index aller zweiter Ebenen gleich ist. Sprich jeder Menüpunkt, der im xHTML-Quelltext weiter unten kommt, überdeckt die vorhergehenden Punkte. Dazu müsste ich dem UL-Tag, in welchem die gerade aktive Seite ist eine eigene Klasse mitgeben (damit ich den z-index ändern kann). Leider habe ich keine Ahnung, wie ich das abrufen kann, da der wrap mit dem UL-Tag ja ausserhalb der Menüzustände erfolgt...

Hier mal mein TS:

plugin.freeCssDropDownMenu.horizontal >
plugin.freeCssDropDownMenu.horizontal = HMENU
plugin.freeCssDropDownMenu.horizontal {
  special = directory
  special.value = 34
  #excludeUidList = 35
  if {
    value = 1
    equals = 1
  }
  1 = TMENU
  1 {
    wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
      ATagTitle.field = abstract // description // subtitle // title
      wrapItemAndSub = <li> | </li>
      stdWrap.htmlSpecialChars = 1
    }
    IFSUB < .NO
    IFSUB {
      wrapItemAndSub = <li class="dir"> | </li>
    }
    CUR < .NO
    CUR {
      wrapItemAndSub = <li class="act-cat"> | </li>
    }
    CURIFSUB < .NO
    CURIFSUB {
      wrapItemAndSub = <li class="act-cat-dir"> | </li>
    }
    ACTIFSUB < .NO
    ACTIFSUB {
      wrapItemAndSub = <li class="act-cat-sub"> | </li>
    }
  }
  2 < .1
  2.wrap = <ul> | </ul>
  2.CUR.wrapItemAndSub = <li class="act-page"> | </li>
  3 < .2
  4 < .2
  5 < .2
}

lib.nav.20 <  plugin.freeCssDropDownMenu.horizontal

Hat jemand eine Ahnung, wie ich den UL-Tag der zweiten Ebene nur für die aktive Ebene ändern kann?

Hier wär noch der von Typo3 ausgespuckte HTML-Quelltext:

<ul class="dropdown dropdown-linear dropdown-columnar">

 <li>
  <a title="Home" target="_self" href="http://domain.de/">Home</a>
 </li>

 <li class="dir">
  <a title="Kontakt" target="_self" href="kontakt.html">Kontakt</a>
   <ul>
    <li>
     <a title="Einkauf Buchhaltung" target="_self" href="kontakt/einkauf-buchhaltung.html">Einkauf Buchhaltung</a>
    </li>
    <li>
     <a title="Technik" target="_self" href="kontakt/technik.html">Technik</a>
    </li>
    <li>
     <a title="Verkaufsinnendienst" target="_self" href="kontakt/verkaufsinnendienst.html">Verkaufsinnendienst</a>
    </li>
    <li>
     <a title="Vertrieb" target="_self" href="kontakt/vertrieb.html">Vertrieb</a>
    </li>
   </ul>
  </li>

 <li class="act-cat-sub">
  <a title="Service" target="_self" href="service.html">Service</a>
   <ul>
    <li>
     <a title="Anfahrt" target="_self" href="anfahrt.html">Anfahrt</a>
    </li>
    <li class="act-page">
     <a title="Downloads" target="_self" href="downloads.html">Downloads</a>
    </li>
    <li>
     <a title="Richtlinien" target="_self" href="richtlinien.html">Richtlinien</a>
    </li>
   </ul>
  </li>

 <li class="dir">
  <a title="Leistungen" target="_self" href="leistungen.html">Leistungen</a>
   <ul>
    <li>
     <a title="Weiterverarbeitung" target="_self" href="leistungen/weiterverarbeitung.html">Weiterverarbeitung</a>
    </li>
    <li>
     <a title="Rollenoffset" target="_self" href="leistungen/rollenoffset.html">Rollenoffset</a>
    </li>
    <li>
     <a title="Bogenoffset" target="_self" href="leistungen/bogenoffset.html">Bogenoffset</a>
    </li>
    <li>
     <a title="Vorstufe" target="_self" href="leistungen/vorstufe.html">Vorstufe</a>
    </li>
   </ul>
  </li>

 <li class="dir">
  <a title="Unternehmen" target="_self" href="unternehmen.html">Unternehmen</a>
   <ul>
    <li>
     <a title="Verbundene Unternehmen" target="_self" href="unternehmen/verbundene-unternehmen.html">Verbundene Unternehmen</a>
    </li>
    <li>
     <a title="Ausbildung" target="_self" href="unternehmen/ausbildung.html">Ausbildung</a>
    </li>
    <li>
     <a title="Jobs" target="_self" href="unternehmen/jobs.html">Jobs</a>
    </li>
    <li>
     <a title="Umwelt Qualität" target="_self" href="unternehmen/umwelt-qualitaet.html">Umwelt Qualität</a>
    </li>
    <li>
     <a title="Portrait" target="_self" href="unternehmen/portrait.html">Portrait</a>
    </li>
   </ul>
  </li>

</ul>

Danke im voraus,
Huaba

Unbekannter Benutzer · · Beste Antwort

Hm, manchmal sieht man den Wald vor lauter Bäumen nicht 😃

Der normale UL mit dem position und dem z-index war im CSS so angegeben:

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 63;
 width: 100%;
}

Hab einfach noch eine Klasse hinzugefügt und schon gehts:

li.act-cat-sub ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 60;
 width: 100%;
}