[Vincent]

Moin
gibt es ein gutes Tutorial für das einbinden von ypMenu.
sollte für 0-Anfänger geeignet sein (naja 24h Typo3 ist quasi 0)
Danke ganz schön komplex das ganze ...
Vincent

[Armin]

moin,

schau dir mal da den letzten Beitrag von mir an: http://www.typo3forum.net/forum/typo...-dropdown.html

Armin

[Vincent]

klar habe ich gemacht
aber ein ausführliches tutorial für einen neuling ist es halt nicht (habe inzwischen noch das gefunden: http://www.typo3.net/index.php?id=13...id=20440&page=) wobei mir das auch noch zu schwer ist ....
mir ist der zusammenhang typoscript, css, java php wo was wie noch nicht klar ...

Meine Frage zu dem Zitierten LINK:
ypMenu (ypSlideOutMenu) in Typo3

- ypMenu.php ( per includeLibs in Typo3 einbinden )
- ypSlideOutMenus.js ( im header laden )
- ypMenu.css ( in eure CSS-datei übernehmen oder im header mitladen )

ich gehe dasvon aus das dies alles im root template geschehen soll wo und wie genau wird das gemacht??
Danke


Danke

[Armin]

Hallo Vincent,

Tutorials dienen ja meist auch nur Unterstützung um etwas umzusetzen ohne jedoch auf alle Einzelheiten einzugehen.

Nur Kurz zur Erklärung:
Ich gehe jetzt einfach mal davon aus, das du weißt wie ein normales Menue mittels TS erstellt wird.
Für das ypmenue wird aber eine spezieller Aufbau benötigt, der nur mit TS nicht zu erstellen ist. Mittels TS wird nun die Klasse in PHP deklariert (page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php) und kann später mit TS aufgerufen werden.
Zusätzlich müssem weitere Paramter übergen werden, damit die PHP-Klasse eine Zuordnung erstellen in welcher Menueebene die Menuepunkte sich befinden.(IProcFunc = user_menu->secondLevel).
Ist nun das TS zur Menueerstellung durchlaufen, so wird der Inhalt der Objekte der PHP-Klasse wieder an TS zurückgegeben.
(temp.user_menu = USER, temp.user_menu.userFunc = user_menu->menuEnd)

JavaScript muss in den Quelltext eingebunden werden, damit das Menue beim Überfahren der Links ausfährt. Mit der CSS kannst du das aussehen des ypmenue bestimmen.

Soweit alles klar? ;-)

Armin

[Pasci2]

Ich bekomm das ypmenu einfach nicht hin. Hab jetzt schon ueber 10std kontinuierlich daran rumgemacht und alle moeglichen optionen ausprobiert. Aber es wird einfach nicht angezeigt. (Bei den Beispiel Seiten, wie http://www.sci-worx.com/ zeigt der browser das ypmenu an, also das java in meinem browser funzt)
Ich benutze typo3 4.0 und habe meine seite mit templavoila generiert. Fuer die menues habe ich lib.menu_1 als object path benutzt, den ich auch dementsprechend im typoscript angepasst habe. Auch die pfade stimmen. Was kann da noch falsch sein? Hier ist der link zu meiner site: http://www.exotissimo.com/t/index.php?id=311

Hier das setup fuer die main template:

config.spamProtectEmailAddresses = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page.10.marks.MENU < temp.ypMenu
page.10.marks.MENUCODE = USER
page.10.marks.MENUCODE.userFunc = user_menu->menuEnd

und hier die externe template, die ich ypMenu genannt habe
Externes template heisst doch einfach ein neues template anlegen, oder vestehe ich da was falsch?? siehe bitte screenshot ganz unten:

#Typo3: externes Template ( temp.ypMenu ) -> Setup 

config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/templates/exo2col/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/templates/exo2col/ypSlideOutMenus.js" language="JavaScript"></script> temp.ypMenu.special = directory
# 311 ist die ID der root-page - siehe screenshot
temp.ypMenu.special.value = 311
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = |
          NO = 1
          NO {
               wrap = |
               XY = [50.w]+20, 31
               30 = IMAGE
               30.file = fileadmin/templates/exo2col/menu_bg2.gif
               50 = TEXT
               50 {
                    text.field = title
                    fontSize = 10
                    fontFile = fileadmin/templates/exo2col/fonts/verdana.ttf
                    fontColor = #222222
                    offset = 10,20
                    niceText = 0
                    transparentBackground = 1
               }
               100 = || IMAGE
               100.file = fileadmin/templates/exo2col/menu_space.gif
          }

          IFSUB < temp.ypMenu.1.NO
          IFSUB = 1

          RO < temp.ypMenu.1.NO
          RO = 1
          RO {
               backColor = #DDDDDD
               30 >
          }

          IFSUBRO < temp.ypMenu.1.NO
          IFSUBRO = 1
          IFSUBRO {
               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

hier ist ein teil meiner html template:

<script language="javascript" src="/fileadmin/template/res/ypSlideOutMenus.js" type="text/javascript"></script> <script language="javascript" src="/fileadmin/template/res/jslib.js" type="text/javascript"></script>

und

<div id="cMenu"> <div align="right">###MENU######MENUCODE###</div> </div>

und natuerlich noch die css:

#cMenu {<br />
     height:31px;<br />
     width: 708px;<br />
     margin-left:1px;<br />
     margin-bottom:1px;<br />
     background: #FFFFFF url(menu_bg.gif) repeat-x top left;<br />
     position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */<br />
}<br /> <br />
/*<br />
###################<br />
# ypMenu Styles #<br />
###################<br />
*/<br />
.mmContent {<br />
     /* nrmale schrift definieren */<br />
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;<br />
}<br /> <br />
.mmContent ul {<br />
     margin: 0px; padding: 0px;<br />
     list-style: none;<br />
     z-index:2;<br />
     position:relative;<br />
     left:0px; top:0px;<br />
}<br />
.mmContent li {<br />
     padding: 0px; margin: 0px;<br />
}<br /> <br />
.menuBackground {<br />
     position:absolute;<br />
     left:0px; top:0px;<br />
     z-index:1;<br />
}<br /> <br />
.mmContent li a {<br />
     /* Links bzw. die slideMenü-Elemente definieren */<br />
     display: block;<br />
     color: #222222;<br />
     font-weight:normal;<br />
     font-size: 12px;<br />
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;<br />
     width: 150px;<br />
     padding: 5px;<br />
     text-decoration: none;<br />
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */<br />
}<br /> <br />
* html .mmContent li a {<br />
     width: 160px;<br />
     width: 160px;<br />
}<br /> <br />
/* */<br />
.mmContent li a:link { background: #EAED65; color: #222222; font-size: 12px; }<br />
.mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }<br /> <br />
.mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }<br />
.mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }<br /> <br />
.mmContent li a.submenu {<br />
background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }<br />
.mmContent li a.submenu:hover {<br />
background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }<br /> <br />
/*<br />
##########################################<br />
# ypMenu Styles for our belove IE 5.01 #<br />
##########################################<br />
*/<br /> <br />
.mmContentb {<br />
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;<br />
}<br /> <br />
.mmContentb ul {<br />
     margin: 0px; padding: 0px;<br />
     list-style: none;<br />
     z-index:2;<br />
     position:relative;<br />
     left:0px; top:0px;<br />
}<br />
.mmContentb li {<br />
     padding: 0px; margin: 0px;<br />
}<br /> <br />
.menuBackground {<br />
     position:absolute;<br />
     left:0px; top:0px;<br />
     z-index:1;<br />
}<br /> <br />
.mmContentb li a {<br />
     /* Links bzw. die slideMenü-Elemente definieren */<br />
     display: block;<br />
     width: 150px;<br />
     padding: 5px;<br />
     color: #222222;<br />
     font-weight: normal;<br />
     font-size: 12px;<br />
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;<br />
     text-decoration: none;<br />
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */<br />
}<br /> <br />
* html .mmContentb li a {<br />
     width: 160px;<br />
     width: 160px;<br />
}<br /> <br />
.mmContentb li a:link { background: #EAED65; color: #222222;}<br />
.mmContentb li a:visited { background: #EAED65; color: #222222;}<br /> <br />
.mmContentb li a:hover{ background: #FFFF99; color: #222222;}<br />
.mmContentb li a:active { background: #EAED65; color: #222222;}<br /> <br />
.mmContentb li a.submenu {<br />
     background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;<br />
     font-size: 12px;<br />
}<br />
.mmContentb li a.submenu:hover {<br />
     background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;<br />
     font-size: 12px;<br />
}

hier noch der screenshot vom 'externen template'



und vom template voila:


Ich wuerde mich ueber jegliche Hilfe von Euch sehr freuen. Merci schon mal im Vorraus...