[Beispiel] ypMenu ( GMENU horizontal , ypSlideOutMenus )

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    25. 01. 2005, 17:33

    Tach allerseits :)

    ich habe mir mal die Mühe gemacht (..sieh an ..sieh an ;) ) und zum ypMenu ein relativ umfangreiches Beispiel erstellt. Dieses soll euch helfen das ypMenu schnell und ohne viel Zeitaufwand zum laufen zu bringen...

    aus optischen Gründen habe ich das Beispiel erstmal im HTML-Format erstellt:
    http://steinhauer-gmbh.net/_tmp/ypMenu/

    ...im Laufe der Zeit werde ich mein Posting erweitern (editieren)

    - Verbesserungsvorschläge erwünscht
    - bei Problemen oder wenn nicht verständlich, fragen :)

    [quote:dcd9872421]
    [b:dcd9872421]ypMenu (ypSlideOutMenu) in Typo3[/b:dcd9872421]

    Dateien (copyright haben die jeweiligen Autoren):
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypMenu-php.zip]ypMenu.php [/url]( [i:dcd9872421]per includeLibs in Typo3 einbinden[/i:dcd9872421] )
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypSlideOutMenus-js.zip]ypSlideOutMenus.js[/url] ( [i:dcd9872421]im header laden[/i:dcd9872421] )
    - [url=http://steinhauer-gmbh.net/_tmp/ypMenu/ypMenu-css.zip]ypMenu.css[/url] ( [i:dcd9872421]in eure CSS-datei übernehmen oder im header mitladen[/i:dcd9872421] )

    [code:1:dcd9872421]
    [b]Typo3: externes Template ( temp.ypMenu ) -> Setup[/b]

    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> temp.ypMenu.special = directory
    # 57 ist die ID der root-page - siehe screenshot
    temp.ypMenu.special.value = 57
    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/scripts/ypMenu/menu_bg2.gif
    50 = TEXT
    50 {
    text.field = title
    fontSize = 10
    fontFile = fileadmin/templates/fonts/verdana.ttf
    fontColor = #222222
    offset = 10,20
    niceText = 0
    transparentBackground = 1
    }
    100 = || IMAGE
    100.file = fileadmin/scripts/ypMenu/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
    [/code:1:dcd9872421]
    Ich habe vieles - wie auch das ypMenu - aus meinem MainTemplate in externe Templates ausgelagert, damits im MainTemplate übersichtlich bleibt! Deshalb kommt auch nur wenig TS in das MainTemplate(externes Template einbinden)
    [code:1:dcd9872421]
    [b]Typo3: MainTemplate der root-page -> Setup[/b]

    page = PAGE
    page.typeNum = 0
    page.stylesheet = fileadmin/templates/style2/class.css
    page.10 = TEMPLATE
    page.10{
    template = FILE
    template.file = fileadmin/templates/style2/template.htm
    workOnSubpart = DOKUMENT

    marks.MENU = COA
    marks.MENU {
    10 < temp.ypMenu
    20 < temp.user_menu
    }
    }
    [/code:1:dcd9872421]
    Das dazugehörige XHTML-template ist natürlich nur als Beispiel/Vorlage gedacht!
    [code:1:dcd9872421]
    [b]HTML-template ( fileadmin/templates/style2/template.htm )[/b]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <!-- ###DOKUMENT###-->
    <div id="cRoot">
    <div id="cBanner"></div>
    <div id="cHeader"></div>
    <div id="cMenu">###MENU###</div>
    <div id="cPfad"></div>
    <div id="cInhalt">###INHALT###</div>
    <div id="cFunktion"></div>
    <div style="clear:both;height:1px;overflow:hidden;"></div>
    <div id="cFooter"></div>
    </div>
    <!-- ###DOKUMENT### -->
    </body>
    </html>
    [/code:1:dcd9872421]
    Im CSS-Teil kann man im grunde >alles< dem eigenen design anpassen, ich habe aber erstmal nur die relevantesten eigenschaften blau markiert. Ausserdem ist die class "cMenu" nur ein Beispiel für einen DIV-container in dem der MENU-marker steht.
    [code:1:dcd9872421]
    [b]CSS-code ( fileadmin/templates/style2/class.css ) für das ypMenu und für den DIV mit der ID cMenu[/b]

    #cMenu {
    height:31px;
    width: 708px;
    margin-left:1px;
    margin-bottom:1px;
    background: #FFFFFF url(menu_bg.gif) repeat-x top left;
    position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
    }

    /*
    ###################
    # ypMenu Styles #
    ###################
    */
    .mmContent {
    /* nrmale schrift definieren */
    font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
    }

    .mmContent ul {
    margin: 0px; padding: 0px;
    list-style: none;
    z-index:2;
    position:relative;
    left:0px; top:0px;
    }
    .mmContent li {
    padding: 0px; margin: 0px;
    }

    .menuBackground {
    position:absolute;
    left:0px; top:0px;
    z-index:1;
    }

    .mmContent li a {
    /* Links bzw. die slideMenü-Elemente definieren */
    display: block;
    color: #222222;
    font-weight:normal;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
    width: 150px;
    padding: 5px;
    text-decoration: none;
    border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
    }

    * html .mmContent li a {
    width: 160px;
    width: 160px;
    }

    /* */
    .mmContent li a:link { background: #EAED65; color: #222222; font-size: 12px; }
    .mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }
    .mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }

    .mmContent li a.submenu {
    background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }
    .mmContent li a.submenu:hover {
    background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }

    /*
    ##########################################
    # ypMenu Styles for our belove IE 5.01 #
    ##########################################
    */

    .mmContentb {
    font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
    }

    .mmContentb ul {
    margin: 0px; padding: 0px;
    list-style: none;
    z-index:2;
    position:relative;
    left:0px; top:0px;
    }
    .mmContentb li {
    padding: 0px; margin: 0px;
    }

    .menuBackground {
    position:absolute;
    left:0px; top:0px;
    z-index:1;
    }

    .mmContentb li a {
    /* Links bzw. die slideMenü-Elemente definieren */
    display: block;
    width: 150px;
    padding: 5px;
    color: #222222;
    font-weight: normal;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
    text-decoration: none;
    border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
    }

    * html .mmContentb li a {
    width: 160px;
    width: 160px;
    }

    .mmContentb li a:link { background: #EAED65; color: #222222;}
    .mmContentb li a:visited { background: #EAED65; color: #222222;}

    .mmContentb li a:hover{ background: #FFFF99; color: #222222;}
    .mmContentb li a:active { background: #EAED65; color: #222222;}

    .mmContentb li a.submenu {
    background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }
    .mmContentb li a.submenu:hover {
    background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
    font-size: 12px;
    }
    [/code:1:dcd9872421]
    In der ypMenu.php wird man noch ein paar kleinigkeiten anpassen müssen...
    [code:1:dcd9872421]
    [b]ypMenu.php anpassen...[/b]

    var $offsetY = 31; // vertikale fixierung des slideMenu's - relativ zum gecenterten DIV oder TD
    var $offsetX = 0; // horizontale fixierung des slideMenu's - relativ zum gecenterten DIV oder TD
    var $sublevelWidth = 160; // breite des sublevel elements
    var $sublevelHeight = 25; // höhe des sublevel elements

    var $padding = 5; // padding-abstand rechts und links
    var $fontSize = 11; // schriftgröße
    var $breakpoint = 14; // bricht Zeile nach X(14) Zeichen um
    var $secPadding = 16; // padding-abstand oben und unten

    var $fontFile = 'fileadmin/templates/fonts/verdana.ttf'; // font-datei wird fürs berechnen des zeilenumbruchs benötigt
    var $transBg = 'fileadmin/scripts/ypMenu/menu_bg.png'; // transparente PNG datei, behebt transparenz-fehler beim Mac IE 5 und Opera - die PNG-Transparenz sollte die gleiche sein wie die der CSS-FILTER-eigenschaft: alpha(opacity)
    [/code:1:dcd9872421]

    [/quote:dcd9872421]

    MfG

    [i:dcd9872421]p.s. ypMenu kommt von Ersteller der http://www.meade.de[/i:dcd9872421]


  • silverzone silverzon...
    Sternenflotten-Admiral
    0 x
    185 Beiträge
    0 Hilfreiche Beiträge
    27. 06. 2006, 14:37

    ich hatte die problemstellung, dass ich in der ersten menüebene keinen link will, wenn es submenüs hatte. villeicht will das jemand von euch auch machen. dazu muss man in der ypmenu.php folgende zeilen abändern:

    1. // build ypMenu JS
    2. $GLOBALS['TSFE']->applicationData['ypTemp']['js'] .= "
    3. menu". $I['uid'] .".onactivate = new Function(\"document.images['" .$I['theName']. "'].src = " .$I['theName']. "_h.src\");
    4. menu". $I['uid'] .".ondeactivate = new Function(\"document.images['" .$I['theName']. "'].src = " .$I['theName']. "_n.src\");
    5. ";
    6. $I['parts']['ATag_begin'] = '<a onfocus="' . $I['linkHREF']['onFocus']. '" onmouseover="'. $onmouseover .'" onmouseout="'. $onmouseout .'" id="act'. $I['uid'] .'">';
    7.  
    8. } else {
    9. // no ypMenu needed
    10. $onmouseover = "over('" .$I['theName']. "');";
    11. $onmouseout = "out('" .$I['theName']. "'); ";
    12. $I['parts']['ATag_begin'] = '<a href="' .$I['linkHREF']['HREF']. '" onfocus="' . $I['linkHREF']['onFocus']. '" onmouseover="'. $onmouseover .'" onmouseout="'. $onmouseout .'" id="act'. $I['uid'] .'">';
    13. }
    14. // move right
    15. $GLOBALS['TSFE']->applicationData['ypTemp']['x'] += $I['val']['output_w'];

    gruss

  • tscript tscript
    TYPO3-Anwärter
    0 x
    6 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2006, 12:16

    Hi,

    dieser Beitrag ist schon etwas älter, aber kann mir vielleicht jemand die files vom ypMenu schicken oder nochmals posten unter einer andere domain. die links im ersten beitrag sind nicht mehr aktuell... vielen Dank

  • miho miho
    T3PO
    0 x
    11 Beiträge
    0 Hilfreiche Beiträge
    19. 07. 2006, 11:45

    Alle benötigten Dateien kannst du hier runterladen:

    [url]http://213.239.197.144/fileadmin/downloads/ypmenu.zip[/url]

    mfg miho

  • cored cored
    R2-D2
    0 x
    93 Beiträge
    0 Hilfreiche Beiträge
    21. 07. 2006, 11:16

    Hallo zusammen,

    Ich habe das menu installiert und die erste Ebene funktioniert auch einwandfrei, aber die UnterMenüs werden nur als Text angezeigt und werden untereinander angezeigt statt unter dem jeweiligen Obermenüpunkt nebeneinander.
    Ich habe jetzt schon einige Zeit lang versuch durch den Quellcode durchzusteigen und kam zu dem Schluß, dass in dem PHP File die Horizontale Position nicht richtig aus

    1. $GLOBALS['TSFE']->applicationData['ypMenus'][$menu['parentId']]['left']
    ausgelesen wird.
    Woran kann das liegen? oder ist das ein ganz anderes Problem, was sich aber bis hierhin auswirkt?
    Wäre dankbar für jede Hilfe.
    P.S. ich habe die Dateien aus dem oben geposteten zip verwendet.
    Wer will kann ja mal rein schauen. [url]http://85.88.7.233/typo3wamp/[/url]

  • cored cored
    R2-D2
    0 x
    93 Beiträge
    0 Hilfreiche Beiträge
    26. 07. 2006, 16:52

    Für das horizontale Menu habe ich jetzt die Lösung:

    Ich habe von Andreas Tschirpke (dem "Erfinder") eine zip Datei bekommen, die u.a. auch die ypMenu.php enthält, die man benötigt, um das horizontale
    ypMenu zu realisieren.
    Leider komme ich von hier aus nicht an einen Account heran, auf den ich die Datei uploaded könnte (ftp ports sind gesperrt).
    Heute abend werde ich hier aber einen Link einstellen, unter dem ihr euch das File herunterladen könnt. (Natürlich mit Genehmigung von Andreas Tschirpke).
    Bei mir hat es damit auf anhieb funktioniert.

    danke an Andreas Tschirpke.

    Gruß Cored

  • cored cored
    R2-D2
    0 x
    93 Beiträge
    0 Hilfreiche Beiträge
    26. 07. 2006, 21:47

    Also das zip file mit der wichtigen ypmenu.php, dem css und den js Dateien gibt es unter
    [url]http://haurucktypo.ha.funpic.de/ypmenu/ypmenu.zip[/url]

    Grüße Cored

  • rastapati rastapati
    TYPO3-Anwärter
    0 x
    7 Beiträge
    0 Hilfreiche Beiträge
    24. 08. 2006, 11:08

    Hallo Forum,

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

    lg
    patrick

  • rastapati rastapati
    TYPO3-Anwärter
    0 x
    7 Beiträge
    0 Hilfreiche Beiträge
    28. 08. 2006, 02:28

    Hi Leute,

    weiß jemand von euch wie man das ypmenu mit sublevels nach oben macht?

    bitte um hilfe!
    danke
    patrick

  • WeVo WeVo
    Jedi-Meister
    0 x
    293 Beiträge
    0 Hilfreiche Beiträge
    10. 09. 2006, 13:20

    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? [url]www.zffh.de/index.php[/url]
    Danke für Eure Posts.

    Viele Grüße

    Markus