Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Superfish - Megafish Menü
#1
Hallo,
ich bin ein Typo3-Anfänger und wollte mich erst einmal für die guten Video-Tutorials (wowa-design), die mir einen guten Einstieg in TYPO3 ermöglicht haben, bedanken.

Nun habe ich ein Problem, das Superfish-Menü möchte ich gern als Mehr-Spalten-Menü (Mega-Fish ) umsetzen. Dazu lud ich mir die Zip-Datei Superfish-Master herunter (enthält ein Example Mega-Menu).
Bei der Umsetzung stoße ich an meine Grenzen, hier mein Typoscript-Code für das Menü:

Code:
#Hauptmenu

lib.hauptmenu = HMENU
lib.hauptmenu {
  
  special = directory
  special.value = 5
  
  1 = TMENU
  1 {
    wrap = <ul class="sf-menu" id="mega">|</ul>
    expAll = 1
    NO = 1
    NO {
      wrapItemAndSub = <li class="current">|</li>|*|<li>|</li>
      stdWrap.htmlSpecialChars = 1
    }
  }
  
  2 = TMENU
  2 {
    expAll = 1
    wrap = <div class="sf-mega">|</div>
    NO = 1
    NO {
      wrapItemAndSub = <div class="sf-mega-section">|</div>
      stdWrap.htmlSpecialChars = 1
      doNotLinkIt = 1
    }
  }
  
  3 = TMENU
  3 {
    expAll = 1
    wrap = <ul>|</ul>
    NO = 1
    NO {
      linkWrap = <li class="current">|</li>|*|<li>|</li>
    }
  }
}

Soweit funktioniert das Menü sehr gut. Aber ... :
Für die zweite Ebene wurde doNotLinkIt eingefügt, dafür sollen die Einträge dieser Ebene einem <h2>-Tag umschlossen werden, ich sitze nun schon den dritten Tag dran und bekomme das nicht gebacken.

Über Hilfe zu diesem Problem würde ich mich sehr freuen.

Vielen Dank im voraus und einen sonnigen Montag
Hendrik-R.
Signatur lädt...
Zitieren
#2
Ein Link zu deiner Seite wäre hilfreich.

Ebenso hilfreich wäre:
A: der HTML-Code, wie er sein sollte
B: der HTML-Code, wie er jetzt ist
Zitieren
#3
Guten Abend Wolfgang,

Ich habe das Typoscript zum Menü noch einmal überarbeitet:

Code:
lib.hauptmenu = HMENU
lib.hauptmenu {
  
  special       = directory
  special.value = 5
  
  1 = TMENU
  1 {
    # expAll mit kleinen L's
    wrap = <ul class="sf-menu" id="mega">|</ul>
    expAll = 1
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
      stdWrap.htmlSpecialChars = 1
    }
    ACT = 1
    ACT {
      wrapItemAndSub = <li>|</li>
      ATagParams =  class="active"
    }
  }
  
  2 = TMENU
  2 {
    expAll = 1
    wrap = <div class="sf-mega">|</div>
    NO = 1
    NO {
      maxItems = 5
      wrapItemAndSub = <div class="sf-mega-section">|</div>
      stdWrap.htmlSpecialChars = 1
      doNotLinkIt = 1
    }
  }
  
  3 = TMENU
  3 {
    expAll = 1
    maxItems = 5
    wrap = <ul>|</ul>
    NO = 1
    NO {
      linkWrap = <li>|</li>
    }
    ACT = 1
    ACT {
      wrapItemAndSub = <li>|</li>
      ATagParams =  class="active"
    }
  }
}

Der Original-HTML-Code:

Code:
<ul class="sf-menu" id="example">
  <li class="current"><a href="#">menu item 1</a></li>
  <li><a href="#">menu item 2</a></li>
  <li>
     <a href="#">menu item 3</a>
     <div class="sf-mega">
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
             <li class="current"><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
          </ul>
        </div>
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
             <li class="current"><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
          </ul>
        </div>
        <div class="sf-mega-section">
          <h2>list heading:</h2>
          <ul>
             <li class="current"><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
             <li><a href="#">menu item</a></li>
          </ul>
        </div>
     </div>
  </li>
  <li>
     <a href="#">menu item 4</a>
  </li>
</ul>

Mein derzeitiger HTML-Quellcode des Menüs sieht so aus:

Code:
<ul class="sf-menu" id="mega">
    <li><a href="home/" >Home</a></li>
    <li><a href="seite-2/" class="active">Seite 2</a>
    <div class="sf-mega">
        <div class="sf-mega-section">Überschrift 1
            <ul>
                <li><a href="seite-2/ueberschrift-1/subseite-1-1/" >Subseite 1-1</a></li>
                <li><a href="seite-2/ueberschrift-1/subseite-1-2/" >Subseite 1-2</a></li>
                <li><a href="seite-2/ueberschrift-1/subseite-1-3/" >Subseite 1-3</a></li>
                <li><a href="seite-2/ueberschrift-1/subseite-1-4/" >Subseite 1-4</a></li>
                <li><a href="seite-2/ueberschrift-1/subseite-1-5/" >Subseite 1-5</a></li>
            </ul>
        </div>
        <div class="sf-mega-section">Überschrift 2
            <ul>
                <li><a href="seite-2/ueberschrift-2/subseite-2-1/" >Subseite 2-1</a></li>
                <li><a href="seite-2/ueberschrift-2/subseite-2-2/" >Subseite 2-2</a></li>
                <li><a href="seite-2/ueberschrift-2/subseite-2-3/" >Subseite 2-3</a></li>
                <li><a href="seite-2/ueberschrift-2/subseite-2-4/" >Subseite 2-4</a></li>
                <li><a href="seite-2/ueberschrift-2/subseite-2-5/" >Subseite 2-5</a></li>
            </ul>
        </div>
        <div class="sf-mega-section">Überschrift 3
            <ul>
                <li><a href="seite-2/ueberschrift-3/subseite-3-1/" >Subseite 3-1</a></li>
                <li><a href="seite-2/ueberschrift-3/subseite-3-2/" >Subseite 3-2</a></li>
                <li><a href="seite-2/ueberschrift-3/subseite-3-3/" >Subseite 3-3</a></li>
                <li><a href="seite-2/ueberschrift-3/subseite-3-4/" >Subseite 3-4</a></li>
                <li><a href="seite-2/ueberschrift-3/subseite-3-5/" >Subseite 3-5</a></li>
            </ul>
        </div>
    </div>
    </li>
    <li><a href="seite-3/" >Seite 3</a></li>
    <li><a href="seite-4/" >Seite 4</a></li>
    <li><a href="seite-5/" >Seite 5</a></li>
    <li><a href="seite-6/" >Seite 6</a></li>
</ul>

Was mir jetzt noch fehlt sind die h2-Tags um Überschrift-1, Überschrift-2, und Überschrift-3, da wäre ich über Hilfe sehr dankbar.

Ich habe das Ganze mal kurz online gestellt.
Signatur lädt...
Zitieren
#4
Hier findest du verschiedene wraps, die dir für Link-Items zur Verfügung stehen: http://docs.typo3.org/typo3cms/Typoscrip...Index.html

Du musst den Code für Ebene zwei um einen davon ergänzen, schätze ich, ich müsste jetzt aber ausprobieren welcher, ich tippe mal auf stdWrap, also vielleicht so:

    TYPOSCRIPT Programming
  1. 2 = TMENU
  2. 2 {
  3. expAll = 1
  4. wrap = <div class="sf-mega">|</div>
  5. NO = 1
  6. NO {
  7. wrapItemAndSub = <div class="sf-mega-section">|</div>
  8. stdWrap.wrap = <h2>|</h2>
  9. stdWrap.htmlSpecialChars = 1
  10. doNotLinkIt = 1
  11. }
  12. }



Wenn das nicht geht, probiere mal die anderen aus.
Zitieren
#5
Ich danke dir Smile . Ich probier das gleich aus.

Einen schönen Abend
Hendrik-R.
Signatur lädt...
Zitieren
#6
Ganz toll, es funktioniert mit :

Code:
stdWrap.wrap = <h2>|</h2>

Und auch Danke für dein Link-Tipp.
Signatur lädt...
Zitieren
#7
Die Doku TSRef ist absolute Pflichtlektüre, einfach zu finden über http://tsref.de

Und für das TSConfig: http://tsconfig.de
Zitieren
#8
Danke, ich werde mich damit umgehend befassen.
Signatur lädt...
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste