Typoscript für Mega Dropdown Menu [Gelöst]

  • cwalter cwalter
    Padawan
    0 x
    51 Beiträge
    0 Hilfreiche Beiträge
    18. 01. 2010, 08:37

    Hallo zusammen

    Ich hab eine echte Knacknuss - zumindest für mich :). Ich bräuchte für ein mehrspaltiges Dropdown Menü folgenden generierten Code:

    [HTML]<ul id="topnav">
    <li><a href="#">Punkt 1</a></li>
    <li>
    <a href="#">Punkt 2</a>
    <div class="sub">
    <ul>
    <li><h2><a href="#">Unterpunkt 1</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Unterpunkt 1</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#">Punkt 3</a></li>
    <li><a href="#">Punkt 4</a></li>
    <li><a href="#">Punkt 5</a></li>
    </ul>
    [/HTML]

    Allerdings bin ich mit dem hierzu notwendigen typoscript ziemlich überfordert, ich bin mir nicht einmal ganz im klaren, wie ich die einzelnen Seiten von der Hierarchie anordnen müsste, damit eine solche Struktur möglich ist (da die ersten Seiten jeder Unternavigationsgruppe jeweils noch als <h2> ausgezeichnet sein sollten). Gibt es vielleicht einen typoscript-Kenner, welcher sich ein entsprechendes TMENU vorstellen könnte?

    Grüsse
    Christoph


  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 16:37

    bzw. die Richtigen klassen werden bei allen Menüpunkten außer bei "Produkte" eingesetzt.

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    03. 05. 2011, 11:28

    Moin jank,
    vielen Dank für Deine Geduld!

    Warum die Klassen außer bei Produkten richtig gesetzt werden ist mir bis jetzt schleierhaft. Der Object Browser hilft mir da auch nicht weiter.

    Unter Showroom: http://bike.diekavallerie.de.www68.your-server.de/e-showroom.html
    wird nun zumindest mal ne Grafik angezeigt.. Aber diese soll sich nachher ja zwar innerhalb des Menü aber darunter befinden.. Mit padding oder margin komm ich da nicht weiter, die Grafik verschwindet dann aus der "Sichtweite"..
    Meine Idee war ja am Anfang noch irgendwie ein weiteren <div> drum zu wrappen und den dann auszurichten. Total abwägig die Idee??

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    03. 05. 2011, 12:04

    Ein div direkt innerhalb eines ul's ist meines Wissens nicht konform.
    Außerdem weiß ich nicht wie sich das auf das restliche css auswirkt, da dann vermutlich die selectoren/klassen nicht mehr passen.
    In Firebug sehe ich, dass alle Eigenschaften bis auf das padding angewendet werden. das padding wird von ul.dropdown li überschrieben.
    Die Eigenschaft wird nicht angewendet, da die Datei in der Sie steht nicht als letztes sondern als 2. im header eingebunden wird. falls es nichts bringt die styles.css als letztes einzubinden würde ich es statt mit li.id11 mit
    ul.dropdown li.id11 versuchen.

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    03. 05. 2011, 15:49

    [quote="Dennis.D"]Unter Showroom: http://bike.diekavallerie.de.www68.your-server.de/e-showroom.html
    [/quote]
    @ Dennis.D

    Ein wenig Off-Topic:

    An Deiner Stelle würde ich erst mal ein Schritt zurück gehen und mich um das Grund-Layout kümmern.
    Dein Layout bricht nur deshalb nicht aus einander (zumindest rein optisch), weil Du massenhaft Hohen angibst. Hohen-Angaben haben aber bei Elementen, die Text enthalten, nichts zu suchen.
    Lesestoff:
    http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html
    Die leere Elementen, die Du für die runden Ecken benutzest, haben keine semantische Bedeutung und sind völlig überflüssig - Du hast genügend Elementen, die die Ecken-Grafiken aufnehmen können.
    Du schließt (beendest) die Floats nicht ein. Daher ist Dein Layout instabil (eigentlich eher zerschossen). Und das kannst Du leicht sehen, indem Du alle Hohen-Angaben entfernst.
    Lesestoff:
    http://little-boxes.de/lb1/IV-css-positionierung.html

    Deine Navigation habe ich mir nicht angesehen. Um da einzusteigen, müsste ich mir vielleicht mehrere Vorbeiträge anschauen und die TypoScript Konfiguration erst mal finden.
    Leider habe ich die Zeit dafür nicht

    .

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    03. 05. 2011, 15:59

    Hallo etux,

    vielen Dank für Deine Hinweise. Ich werde mir insbesondere den 2. link von Dir mal genauer ansehen.
    Das Template wurde mir so geliefert, das habe nicht ich erstellt.

    Grüße
    Dennis

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    16. 05. 2011, 11:06

    Hallo jank,

    ich bin ein wenig weiter gekommen mit dem Menü. Hab aber immer noch zu kämpfen.. :(
    Besonders die Sache mit den Bildern klappt noch gar nicht so wie ich mir das vorstelle.

    http://bike.diekavallerie.de.www68.your-server.de/

    Was ich grad nicht verstehe:
    - wie bekomme ich für die Spalten eine feste Breite, so dass die Abstände zwischen den Spalten gleich breit sind und es zu keinem Umbruch bei den links kommt?
    - die Unterseiten von "Produkte" "PG Bikes" sind etwas nach rechts eingerückt.
    das kommt anscheinend von: ul.dropdown ul a aus der default.advanced.css. Komischerweise wrappt er bei dem letzten das "last" herum, obwohl ich es aus dem TypoScript mal entfernt habe?!

    Besten Dank und Grüße
    Dennis

  • Nuern Nuern
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    16. 05. 2011, 14:55

    Moin zusammen,

    danke, dass es Leute gibt, die solche Ext. schreiben und dass auch noch darüber geschrieben wird.

    Ich möchte mich garnicht lange aufhalten mit meinem Anliegen. Trotz der vielen gezeigten Beispiele bekomme ich das Menü nicht zum Laufen:

    [b]1.[/b] Die Extension habe ich bei den statischen Templates aufgenommen auf root-Ebene.

    [b]2.[/b] Die Konstanten habe ich auf root-Ebene hinzugefügt

    1. plugin.freeCssDropDownMenu.themeCss = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/themes/_template/default.css
    2. plugin.freeCssDropDownMenu.page = page
    3. plugin.freeCssDropDownMenu.headerDataId = 9876
    4. plugin.freeCssDropDownMenu.horizontal = 1
    5. plugin.freeCssDropDownMenu.horizontal.start = 2
    6. plugin.freeCssDropDownMenu.horizontal.exclude =
    7. plugin.freeCssDropDownMenu.vertical = 0
    8. plugin.freeCssDropDownMenu.vertical.start = 1
    9. plugin.freeCssDropDownMenu.vertical.exclude =

    [b]3.[/b] Die CSS-Dateien wurden in den Header gepackt.

    1. page.headerData.9876 = TEXT
    2. page.headerData.9876.value (
    3. <link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.css" media="all" />
    4. <link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.linear.columnar.css" media="all" />
    5. <link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/lwis.celebrity/default.advanced.css" media="all" />
    6. )

    [b]4.[/b] Der Marker wird angesprochen.

    1. page.20.marks {
    2. NAVI_TOP < plugin.freeCssDropDownMenu.horizontal
    3. NAVI_TOP {
    4. special = directory
    5. special.value = 2
    6. }

    Die CSS-Dateien werden richtig ausgegeben. Der Marker verschwindet auch im Quelltext, wird also angesprochen. Das Problem liegt für mein Verständnis bei der Versorgung des Markers.

    Sieht jemand einen Fehler in meiner Durchführung? #paralyzed#

    Grüße,
    Martin

    ***EDIT***

    Das Problem hat sich erledigt. Hatte den Marker weiter unten nochmals überschrieben, deshalb kam kein Resultat zu stande... #angry#

  • Nuern Nuern
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    27. 05. 2011, 13:55

    Moin jank,

    ich habe dein Menü soweit zum Laufen bekommen, ging ziemlich gut.

    Kann es sein, dass unter der aktuellen Version einige Darstellungsprobleme vorliegen bezüglich des Internet Explorer (getestet unter 8 und 9)?

    Nur bei diesem werden die untergeordneten Ebenen nicht angezeigt. Bei den anderen Browsern kein Problem.

    Habe das ganze mit einer völlig nackten Typo3 4.5.2 probiert.

    Vielleicht hast Du ja einen Tip woran das liegen könnte..

    Danke für die Ext auf jeden Fall.

    Gruß,
    Maddin

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    31. 05. 2011, 00:06

    Bis jetzt kann ich keine Probleme, weder mit IE 8 noch IE 9 ausmachen. Vielleicht läuft der Browser im Kompatibilitätsmodus ausgelöst durch einen falschen Doctype.
    Im IE < 7 wird z.B. Javascript benötigt (jquery library + jquery.dropdown.js) welches aber höhere IE Versionen notfalls auch nicht stört.
    Vielleicht gibt es auch probleme mit dem Restlichen Quelltext. Hier rate ich immer wieder zum [url=http://validator.w3.org/]validieren[/url].

    Es ist schwer zu sagen woran es liegt, ohne wenigstens Einblick in den HTML/CSS Quelltext und vielleicht Auszüge aus dem aktuellen TS.
    Du hast keine URL gepostet...

    PS: Aktuell ist Typo3 4.5.3, daran wird es aber nicht liegen.