Zum Inhalt springen

[Beispiel] ypMenu ( GMENU horizontal , ypSlideOutMenus )

Erstellt am 25. Januar 2005 · 119 Antworten · letzte Antwort am 13. November 2007 · Seite 6 von 6

Tags: JavaScript & AJAX, Tipp

rastapati ·

Hallo Forum,

leider funktioniert dieses Menü nicht wenn realurl extension installiert ist, hat jemand von euch eine ahnung warum?

lg
patrick

WeVo ·

Hallo,

also habe das ypMenu schon seid einem halben Jahr am laufen. Mit dem IE klappt es auch einwandfrei. Wenn ich allerdings die Seite mit dem Firefox aufrufe wird das Slideout für die Untermenüs nicht richtig positioniert d.h. Die Unterpunkte sollten eigentlich unter den Hauptpunkten rauskommen, tun sie aber nicht sie kommen 70 Pixel über den Hauptpunkten raus. Hat jemand ne Idee wieso es beim Firefox zu solchen Problemen kommt? http://www.zffh.de/index.php
Danke für Eure Posts.

Viele Grüße

Markus

wev ·

Hallo Zusammen

hat jemand das YPmenu auch schon mal mit Templavoila eingesetzt. Wenn ja
wie muss ich vorgehen...

gruss vik

ArminB ·

moin,

ich stelle gerade eine Seite auf TV um und setze das ypmenu ein.
Eigentlich musst du genau vorgehen wie sonst auch, nur das du die Zuweisung statt für einen MARER auf ein TypoScriptObjPath setzt.

Armin

Patrick S.​ ·

Hallo,

ich habe jetzt unten aufgefuehrtes Template mit ypMenu und es funktioniert auch alles soweit.
Was ich aber moechte ist, dass in dem Layer, der die zweite Menue-Eintraege auflistet, nicht nur die Eintraege aus der zweiten Ebene angezeigt werden, sondern auch die dazugehoerigen der dritten Ebene.

Wisst ihr was ich meine?
Beispiel:
Aktuelles
- News
- Presse
- Newsletter
Kontakt
- Anfrage
- Anfahrt
- Anschrift

Geht sowas? Ich habe leider keine Idee, wie ich das machen koennte.

temp.menu_1_1 = HMENU
temp.menu_1_1 {
  wrap = <div style="padding-left: 68px">|</div>
  begin = 1
  maxItems = 4

  1 = GMENU
  1 {
    IProcFunc = user_menu->firstLevel
    expAll = 1
    NO {
      backColor = #001073
      wrap =|<br>
      4 = IMAGE
      4.file = fileadmin/img/dreiecke/dreieck-weiss.gif
      4.offset = 0,1
      XY = [5.w]+15, 11+5
      5 = TEXT
      5 {
        text.field = title
        fontFile = fileadmin/fonts/interstate-bold.ttf
        fontColor = white
        fontSize = 11
        offset =10,11
      }
      90 = BOX
      90 {
        dimensions = 0,22,120,2
	color=black
      }
    }
    RO < temp.menu_1_1.1.NO
    RO = 1
    RO.4.file = fileadmin/img/dreiecke/dreieck-gruen.gif || fileadmin/img/dreiecke/dreieck-blau.gif || fileadmin/img/dreiecke/dreieck-grau.gif || fileadmin/img/dreiecke/dreieck-rot.gif |*|
    RO.wrap =|<br>
    ACT < .RO

    IFSUBRO < temp.menu_1_1.1.NO
    IFSUBRO = 1
    IFSUBRO {
    }
  }

  2 = TMENU
  2 {
    IProcFunc = user_menu->secondLevel
    expAll = 1
    NO.linkWrap = <li>|</li>
  }
}

temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd

page.includeCSS {
        file1 = fileadmin/scripts/ypMenu/menu.css
}

page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/ypMenu/res/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/scripts/ypMenu/res/jslib.js" language="JavaScript"></script>
 
page.10 < temp.menu_1_1
page.80 < temp.user_menu

danke,
Patrick

Patrick S.​ ·

Mittlerweile habe ich es hinbekommen. Weiss gar nicht mehr, woran es nun letztendlich lag.

Habe jedoch ein neues Problem. Und zwar werden nicht alle Menuitems angezeigt. Je nach ueberfahrenden Menuepunkt werden mir immer nur ein paar Untermenu-Punkte davon angezeigt. Ich kann leider keinerlei Regelmaessigkeiten feststellen. Ich dachte da an sowas wie, dass sie "hidden" sind, Shortcuts, o.ä. Auch ist es nicht immer einer der letzten Items, sondern es fehlt auch schonmal der Erste oder Zweite. Was aber zu beobachten ist, dass das scheinbar immer die selben sind, die fehlen.

Nun habe ich mal in der ypmenu.php die Anzahl der Items in $I (buildIndex) ausgeben lassen, aber da steht auch nur die Anzahl drin, die mir angezeigt werden. Wuerde also bedeuten, dass einfach nicht alle Menupunkte an das PHP-Script uebergeben werden. Kann das sein? Ich finde den Fehler jedenfalls nicht, vielleicht seht ihr ja was im TS:

temp.menu_1_1_1 = HMENU
temp.menu_1_1_1 {
  wrap = <div style="padding-left: 68px">|</div>
  begin = 1
  maxItems = 4
  special.value = 2
  1 = GMENU
  1 {
    IProcFunc = user_menu->firstLevel
    expAll = 1
    NO {
      backColor = #001073
      wrap =|<br>
      4 = IMAGE
      4.file = fileadmin/img/dreiecke/dreieck-weiss.gif
      4.offset = 0,1
      XY = [5.w]+15, 11+5
      5 = TEXT
      5 {
        text.field = title
        fontFile = fileadmin/fonts/interstate-bold.ttf
        fontColor = white
        fontSize = 11
        offset =10,11
      }
      90 = BOX
      90 {
        dimensions = 0,22,120,2
        color=black
      }
    }

    RO < temp.menu_1_1_1.1.NO

    RO = 1
    RO.4.file = fileadmin/img/dreiecke/dreieck-gruen.gif || fileadmin/img/dreiecke/dreieck-blau.gif || fileadmin/img/dreiecke/dreieck-grau.gif || fileadmin/img/dreiecke/dreieck-rot.gif |*|
    RO.wrap =|<br>
    ACT < .RO
    IFSUBRO < temp.menu_1_1_1.1.NO
    IFSUBRO = 1
    IFSUBRO {
    }
  }
  2 = TMENU
  2 {
    IProcFunc = user_menu->secondLevel
    expAll = 1
    NO.linkWrap = <li>|</li>
  }
}

temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd
page.includeCSS { 
    file1 = fileadmin/scripts/ypMenu/menu.css 
}
page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/ypMenu/res/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/scripts/ypMenu/res/jslib.js" language="JavaScript"></script>
page.80 < temp.user_menu

danke,
Patrick

Patrick S.​ ·

OK, das Problem ist folgendes:

Die Attribute maxItems und begin, die ich verwende, schraenken eben nicht nur das angezeigte Menü an, sondern auch die MouseOver-Darstellung.

Ich weiss leider bis jetzt noch nicht so richtig, wie ich das umgehe, aber ich mach mir mal Gedanken dazu. Vielleicht hat ja noch jemand anderes einen Tipp.

Immer her damit. :-)

Patrick

grisub ·

Hallo Forum

Hat jemand das ypMenu schon erfolgreich mit der Typo3 Version 4.0 einbinden können ?

Beim 3.8er funzt es bei mir super! Leider bringe ich das menü bei der neuen Version zum laufen!

Kann mir jemand einen guten Tip geben, wie ich das realisieren kann?

DANKE

Delle ·

Hi,
ich bastel nun auch schon den ganzen Abend an diesem Menü und es passiert leider noch immer nicht das, was passieren soll. Nun stellt sich mir auch die Frage, ob es mit den neueren Typo3-Versionen etwas Probleme geben könnte? Allerdings würde ich bei mir zunächst auf Anfängerfehler tippen.
Ich habe das externe Template ein wenig für meinen Bedarf abgeändert, da ich eigene Buttongrafiken für die erste Ebene verwende und ich hab noch den ACT-Zustand mit reingenommen, da dieser ansonsten bis hier nicht ging. Nun hab ich alles zusammengefügt und die erste Ebene funktioniert immerhin schon mal. Leider jedoch nicht der Slide-Effekt des Submenü, gar nicht, niente 🙁. Habe sämtliche Dateien inkludiert, das CSS in meine Datei eingepflegt usw.

Hier vielleicht mal mein TS des ausgegliederten Templates, gibt es dort vielleicht schon ganz offensichtliche Fehler, dass es so gar nicht gehen kann?!

config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/ypMenu/ypSlideOutMenus.js" language="JavaScript"></script> 

#oberes Grafikmenü
temp.ypMenu.special = directory
temp.ypMenu.special.value = 4
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = |
          NO = 1
          NO {
               	10 = IMAGE
              	10 {
	             	file.import.field = media
        	       	file.import = fileadmin/images/
                	file.import.listNum = 0
              	}
      		XY = [10.w],[10.h]
      		
          }
 
          IFSUB < temp.ypMenu.1.NO
          IFSUB = 1
 
          RO < temp.ypMenu.1.NO
          RO = 1
          RO {
               	10 = IMAGE
              	10 {
                	file.import.field = media
                	file.import = fileadmin/images/
                	file.import.listNum = 1
              	}
              	XY = [10.w],[10.h]
               	30 >
          }
          
          ACT = 1
          ACT {
       		10 = IMAGE
              	10 {
                	file.import.field = media
                	file.import = fileadmin/images/
                	file.import.listNum = 1
              	}
              	XY = [10.w],[10.h] 
              	30 >
          }
 
          IFSUBRO < temp.ypMenu.1.NO
          IFSUBRO = 1
          IFSUBRO {
                10 = IMAGE
              	10 {
                	file.import.field = media
                	file.import = fileadmin/images/
                	file.import.listNum = 1
               backColor = #DDDDDD
               30 >
          }
          
     }   
 
     2 = TMENU
     2 {
          IProcFunc = user_menu->secondLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     3 = TMENU
     3 {
          IProcFunc = user_menu->thirdLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     4 = TMENU
     4 {
          IProcFunc = user_menu->fourthLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
}

temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd

Mein Haupttemplate sieht an der entscheidenden Stelle so aus:

seite = PAGE
seite {
	typeNum = 0
	bodyTag = <body bgColor = "#FFFFFF">
	stylesheet = fileadmin/style.css
	meta.AUTHOR = Anika Delzeit
	meta.DESCRIPTION = Webseiten des FSV02 Schwerin

	10 = TEMPLATE
	10.template = FILE
	10.template.file = fileadmin/vorlage_01.html
	10.workOnSubpart = DOKUMENT
	
	10.marks.MENU_OBEN = COA
	10.marks.MENU_OBEN {
		10 < temp.ypMenu
		20 < temp.user_menu
	}
...

Ich träume halt davon, dass das Menü irgendwann vielleicht mal so in etwa aussieht:

Bild: full-ahead.de/…/submenu.jpg

Über Hilfe würde ich mich mächtig freuen 🙂.

Gute Nacht!

LG
Delle

Delle ·

Hallo,
ich bin's mal wieder.
Habe gerade einen nützlichen Hinweis gefunden, der mich schon ein riesiges Stück weiter gebracht hat. Ich hatte die ganze Zeit das dumme Gefühl, dass in meinem externen Template weder das Javascript, noch die PHP-Datei, noch die CSS-Datei wirklich verwendet wurden, obwohl sie alle brav inkludiert waren etc. Nun hab ich diese ganzen Dateien in mein root-Template inkludiert und siehe da, das Slidemenü funzt prächtig! Im Firefox ist nun alles da, wo es hin soll, richtig schick und ich hab mich schon gefreut. Wer macht das nun kaputt? Richtig, der gute alte IE7. Ich krieg fast das Spucken. Er verschiebt nicht nur die Submenüs in X-Richtung, nein. Er zeigt immer brav alle Submenüpunkte statisch an und lässt das Slidemenü nur beim ersten Menüpunkt mit Unterpunkten runterfahren. Alle anderen sind immerwährend zu sehen mit Mouseover-Effekt. Harg, ich weiß nun gerade überhautp nicht, wie ich diesem tollen Browser den Quatsch abgewöhnen kann. Hat hier vielleicht jemand einen Tipp für mich?! Ich wäre super dankbar!!!

Nochmal zwei Bilder, wie unterschiedlich der Kram doch interpretiert wird:

Bild: full-ahead.de/…/menu_ff.jpg

Bild: full-ahead.de/…/menu_ie7.jpg

Hier noch das TS für das externe Template. Was daran könnte den IE so aus der Rolle bringen?

temp.ypMenu.special = directory
temp.ypMenu.special.value = 4
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
           IProcFunc = user_menu->firstLevel
           expAll = 1
           wrap = |
	   NO = 1
           NO {
                  10 = IMAGE
              	  10 {
	             	file.import.field = media
        	       	file.import = fileadmin/images/
                	file.import.listNum = 0
              	  }
      		  XY = [10.w],[10.h]
           }

           IFSUB < temp.ypMenu.1.NO
           IFSUB = 1
       
           RO < temp.ypMenu.1.NO
           RO = 1
           RO {
                  10 = IMAGE
              	  10 {
	             	file.import.field = media
        	       	file.import = fileadmin/images/
                	file.import.listNum = 1
              	  }
      		  XY = [10.w],[10.h]
                  30 >
           }
       
           IFSUBRO < temp.ypMenu.1.NO
           IFSUBRO = 1
           IFSUBRO {
                  10 = IMAGE
              	  10 {
	             	file.import.field = media
        	       	file.import = fileadmin/images/
                	file.import.listNum = 1
              	  }
      		  XY = [10.w],[10.h]
                  30 >
           }
           
           ACT = 1
           ACT {
                  10 = IMAGE
              	  10 {
	             	file.import.field = media
        	       	file.import = fileadmin/images/
                	file.import.listNum = 1
              	  }
      		  XY = [10.w],[10.h]
           }
     }   
       
     2 = TMENU
     2 {
           IProcFunc = user_menu->secondLevel
           expAll = 1
           NO.linkWrap = <li>|</li>
     }
      
     3 = TMENU
     3 {
           IProcFunc = user_menu->thirdLevel
           expAll = 1
           NO.linkWrap = <li>|</li>
     }
      
     4 = TMENU
     4 {
           IProcFunc = user_menu->fourthLevel
           expAll = 1
           NO.linkWrap = <li>|</li>
     }
}
   
temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd
bix ·

Hallo,
habe das ypMenu eingebaut und es funktioniert prächtig.

Ein kleines Pronlem habe ich allerdings noch, und hoffe, dass mir hier jmd helfen kann:
Die Menübuttons in der ersten Ebene sehen aus wie Karteireiter, haben jedoch einen Abstand zwischen den einzelnen Menüpunkten.
Wie bekomme ich nun den selben Abstand der Hauptmenübuttons auf die Submenüs übertragen? Die submenüs klappen immer dicht an dicht auf.

Danke!
bix

bix ·

Hier die Lösung:

Ich habe meinen Karteireitern einen transparenten Hintergrund verpasst

transparentBackground = 1

und die Grafik mit dem Gifbuilder breiter gemacht als den Eigentlichen Karteireiter

XY = x-Wert (Breite), y-Wert (Höhe)

Jetzt muss nur noch der Versatz in der ypMenu.php angepasst werden

var $offsetX = 0;

und fertig ist die Laube.

Wenn das Projekt fertiggestellt ist, werde ich den Link hier posten.

Grüße
bix