Zum Inhalt springen

ddaccordion menu

Erstellt am 4. Mai 2011 · 4 Antworten · letzte Antwort am 4. Mai 2011

Tags: Frage

The_C ·

Hallo,

ich quäle mich schon seit einiger Zeit mit diesem Menü http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm das ich TS umsetzen will.
Leider habe ich noch zu wenig Erfahrung und bitte deswegen um eure hilfe.
Der Fehler ist sicher im TS!
Irgend-etwas fehlt da denn das eingebundene Menü ist immer offen die h3 fehlen und trotz js einbindung auch nicht den gewünschten Effekt.
Die js einbindung habe ich über Templavoiler gemacht.

Hier mal mein falsches TS HMENU und die dazugehörige css:

lib.field_nav = HMENU
lib.field_nav {
  special = directory
  special.value = 1
  1 = TMENU
  1 {
    wrap = <ul>|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
    ACT < .NO
    ACT.ATagParams = class="aktiv"
  }
  2 < .1
}
.arrowlistmenu{
width: 251px; /*width of accordion menu*/
padding-top: 37px; 
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: #cfaf86 url(titlebar1.gif) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 30px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(active.gif);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
font: 13px Arial;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 0px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: grey;
/*background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 3px 0;
padding-left: 53px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: red;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #c39703;
background-color: #fff6d3;
}

Danke schonmal im Voraus für eure Hilfe!

Bild1.jpg

etux ·

TS-Setup des Menüs dürfte einfach sein. Es hängt aber davon ab, wie Dein Seitenbaum aussieht. So wären nämlich die Seiten der Ersten Ebene nicht verlinkt (nicht erreichbar).

wasAuchImmer = HMENU
wasAuchImmer {
    wrap = <div class="arrowlistmenu">|</div>
    1 = TMENU
    1 {
        expAll = 1
        noBlur = 1
        NO = 1
        NO {
	    allWrap = <h3 class="menuheader expandable">|</h3>
            doNotLinkIt = 1
        }
    }
    2 = TMENU
    2 {
        expAll = 1
        noBlur = 1
        wrap = <ul class="categoryitems">|</ul>
        NO = 1
        NO {
            wrapItemAndSub = <li>|</li>
        }
    }
    3 < .2
    3.wrap = <ul>|</ul>
    4 < .3
    5 < .3
}

EDIT:
Sorry, bei dem TS habe ich bloß das Menü von der verlinkten Seite „abgebildet“. Dein TS hatte ich nicht mehr im Sinne. „wasAuchImmer“ mit „lib.field_nav“ zu ersetzen und das Menü um die ACT-Zustände (aber erst bei der zweiten Ebene) zu ergänzen, dürfte aber nicht das Problem sein.

The_C ·

Hab vielen Dank!
Funktioniert einwandfrei aber wozu ist das:

3 < .2
3.wrap = <ul>|</ul>
4 < .3
5 < .3
etux ·

Für den Fall dass Du (oder andere) mehrere Ebenen in Deinem Seitenbaum (-menü) hast, oder haben wirst. Sonst einfach löschen. 😃

The_C ·

Ahh... so langsam fange ich an zu verstehen #giggle#
Ich bin aber noch Lichtjahre von Typo3 entfernt.
Danke noch einmal für deine schnelle Hilfe!