Zum Inhalt springen

(Superfish) Menu - zweite Ebene fehlt

Erstellt am 27. Januar 2013 · 3 Antworten · letzte Antwort am 17. August 2013

Tags: Frage

daisy42 ·

Hallo Community,

ich versuche mir mit der Vorlage des Superfish Menu http://users.tpg.com.au/j_birch/plugins/superfish/ ein ebensolches zu erstellen.

Leider klappt das mit den Sub-Menus der 2. Ebene nicht. Entweder werden mir ALLE Unterpunkte angezeigt (in gleicher Art und Weise wie die Punkte der obersten Ebene) oder (wie zur Zeit) gar keine mehr.

Das ganze sieht so aus:
http://www.entenschmie.de/index.php?id=18

Ich habe schon geschaut, laut Quellcode werden die .js Dateien geladen und auch der CSS Code für den Superfish wird offenbar korrekt eingebunden.

Leider weiss ich nicht mehr weiter und hoffe dass ihr etwas beitragen könnt. Ich habe hier - um zumindest ein wenig den Überblick zu behalten - zunächst nur das Standard-Superfish-Menu (Sample 1) genutzt, deshalb sind einige .js Dateien auskommentiert.

Vielen Dank schonmal

Hier mein TypoScript:

config {
  doctype = xhtml_trans
  xmlprologue = none
  #removeDefaultJS = 1
  #removeDefaultJS = external
  xhtml_cleaning = all
  disablePrefixComment = 1
  disableImgBorderAttr = 1
  noPageTitle = 2
}

# Normaler TSConfig Code ab hier

page = PAGE

# Character set
page {
  config.metaCharset = utf-8
  additionalHeaders = Content-Type:text/html;charset=utf-8
}

# Page title
page.headerData {
  5 = TEXT
  5.field = title
  5.wrap = <title>| – {$project.WebsiteTitle}</title>

  2 = TEXT
  2.value (
  <script type="text/javascript">

  $(document).ready(function(){
    $("ul.sf-menu").superfish();
  });

  </script>
  
  )
  
}


# Hacks for IE
page.headerData {
  10 = TEXT
  10.value = <!--[if IE 6]><link href="fileadmin/template/css/fix_ie-6.css" rel="stylesheet" type="text/css" /><![endif]-->
  20 = TEXT
  20.value = <!--[if IE 7]><link href="fileadmin/template/css/fix_ie-7.css" rel="stylesheet" type="text/css" /><![endif]-->
}


# Stylesheets
page.includeCSS {
  
  # Screen and print layout
  file1 = fileadmin/template/css/main.css
  file1.media = screen, print

  # Superfish
  superfish = fileadmin/template/css/superfish.css
}




# JavaScript
page.includeJS {
   jquery = fileadmin/template/js/jquery.min-1.9.0.js
   jquery-migrate = fileadmin/template/js/jquery-migrate-1.0.0.min.js
   superfish = fileadmin/template/js/superfish.js
   #hoverIntend = fileadmin/template/js/jquery.hoverIntent.js
   #supersub = fileadmin/template/js/supersubs.js
   
}


# BODY id (current pid) and class (current category)
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = uid
page.bodyTagCObject.dataWrap = <body id="p|" class="c{levelfield:-2,uid}">


# Template
page.10 = TEMPLATE
page.10 {

  # Template file
  template = FILE
  template.file = fileadmin/template/main.tmpl
  
 

############################# Superfish Menu ##############################
  
marks.MENU = HMENU
marks.MENU {
    
  wrap = <ul class="sf-menu">|</ul>
 
  1 = TMENU
  1 {
    expAll = 1
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>    
    #NO.allWrap= <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1
 
    CUR = 1
    CUR.wrapItemAndSub = <li class="current">|</li>
    CUR.stdWrap.htmlSpecialChars = 1
 
  }
 
  2 = TMENU
  # OHNE die nächsten Zeile werden die Submenu-Punkte genauso wie die oberste Ebene angeigt
  # MIT der nächsten Zeile verschwinden die Submenu-Punkte, jedoch klappt kein Untermenu auf
  2.wrap = <li><ul>|</ul></li>
  2 {
    expAll = 1
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1
 
    CUR = 1
    CUR.wrapItemAndSub = <li class="current">|</li>
    CUR.stdWrap.htmlSpecialChars = 1
 
    ACT = 1
    ACT < .CUR
  }
 
  # Bei mir gibts keine dritte Ebene, deshalb habe ich das auskommentiert
  #3 < .2
  #3.wrap = <ul>|</ul>
}
  
    
# Breadcrumbs
  marks.BREADCRUMBS = HMENU
  marks.BREADCRUMBS {
  
    special = rootline
    special.range = 0 | -1
    
    1 = TMENU
    1.wrap = <div id="breadcrumbs"><strong>Sie sind hier:</strong> |</div>
    1.noBlur = 1
    
    1.NO.allWrap = | / |*| | / |*| |
  }

  # Heading
  marks.PAGE_TITLE = TEXT
  marks.PAGE_TITLE {
    field = subtitle//title
    wrap = <h1>|</h1>
  }

  # Content
  marks.CONTENT < styles.content.get
  
  # Bottom
  marks.BOTTOM_TEXT1 = TEXT
  marks.BOTTOM_TEXT1.value = {$project.BottomText1}
  marks.BOTTOM_TEXT2 = TEXT
  marks.BOTTOM_TEXT2.value = {$project.BottomText2}
  
  # Copyright
  marks.COPYRIGHT = TEXT
  marks.COPYRIGHT.value = {$project.Copyright}
  marks.COPYRIGHT.typolink.parameter = {$project.CopyrightLink}

}
Gregor ·

Hi Daisy,

denke das liegt einfach daran, dass dein Menü so, wie du es momentan erzeugen lässt, nicht die richtige Schachtelung für Superfish aufweist. Heißt, dass die 2. Ebene nicht innerhalb des LI-Tags der ersten Ebene erzeugt wird, sondern danach.

Probier mal folgenden Code für dein Menü. Der erzeugt bei einer Website von mir den korrekten Quellcode für das Superfish-Menü.

Relevant sind vor allem die "IFSUB"-Abschnitte. Wenn es eine Unterebene gibt, dann wird nur ein öffnendes LI-Tag generiert und mit dem wrap der 2. Ebene wieder geschlossen. So erzeugst du die erforderliche Schachtelung.

marks.MENU = HMENU
marks.MENU {

	1 = TMENU
	1 {
		noBlur = 1
		expAll = 1
		collapse = 0
		wrap = <div><ul class="sf-menu"> | </ul></div>
		NO = 1
		NO.allStdWrap.dataWrap = <li>|</li>
		NO.ATagTitle.field = title // subtitle
		NO.ATagParams = 

		ACT = 1
		ACT < .NO
		ACT.allStdWrap.dataWrap = <li>|</li>
		ACT.ATagParams = 
    
		IFSUB = 1
		IFSUB < .NO
		IFSUB.allStdWrap.dataWrap = <li>|
		IFSUB.ATagParams = 

    
		ACTIFSUB = 1
		ACTIFSUB < .IFSUB
		ACTIFSUB.allStdWrap.dataWrap = <li class="active">|
		ACTIFSUB.ATagParams = 
  	}
  	
  	2 = TMENU
  	2 {
    		noBlur = 1
    		expAll = 1
    		collapse = 0
    		wrap = <ul>|</ul></li>
    		NO = 1
    		NO.allStdWrap.dataWrap = <li>|</li>
    		NO.ATagTitle.field = title // subtitle
    		
		ACT = 1
    		ACT < .NO
    		ACT.allStdWrap.dataWrap = <li>|</li>
   		ACT.ATagParams = 
   	}
}
daisy42 ·

Wow, das ist TOLL !!!!

DANKEEEE.

Es klappt alles, wie es sein soll. Allerdings wundert mich das, denn den TS Code habe ich so aus den Beispielen übernommen #angry##angry#

Wie dem auch sei, ich danke dir, das hilft mir SEHR weiter 8-)

SaschaWeidinger ·

Hallo!
Danke für das tolle Typoskript - bei mir hat es so auch wunderbar funktioniert. Ich bin echt froh, dass ich das hier gefunden habe. Aber, wie kann ich die dritte Ebene anzeigen lassen? Könnt ihr mir da weiterhelfen!?
Grüße
Sascha