[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]


  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    07. 03. 2005, 22:58

    Ich habe ein kleines Problem. o.O

    Soweit funktioniert alles, ich erhalte aber ein paar Warnings.

    Ich bekomme immer vier mal
    [code:1:063c888ad4]Warning: imagettfbbox(): Could not find/open font in /var/www/typo3.7/fileadmin/scripts/ypMenu/ypMenu.php on line 135[/code:1:063c888ad4]gefolgt von einmal[code:1:063c888ad4]Warning: Cannot modify header information - headers already sent by (output started at /var/www/typo3.7/fileadmin/scripts/ypMenu/ypMenu.php:135) in /var/www/typo3.7/typo3_src-3.7.0/typo3/sysext/cms/tslib/class.tslib_fe.php on line 2402
    temp.ypMenu.special = directory [/code:1:063c888ad4]Hat jemand eine Ahnung, was das sein könnte?

    http://www.caroonline.de

  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    07. 03. 2005, 23:05

    Es lag daran, dass imagettfbbox die Fonts nicht gefunden hat.

    nachdem ich im php file den Pfad zur Verdana nach t3lib/fonts/verdana.ttf umgebogen hatte, waren die Warnings weg.

    http://www.caroonline.de

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    09. 03. 2005, 10:13

    Hi Leute...

    Kurz zum Thema Browserkompatibilität:
    Opera: Das Menü funktioniert nur wenn sich Opera NICHT als Opera ausgibt. Wenn ihrs doch so einstellt, dann funktioniert das gesamte JavaScript nicht bzw. nur fehlerhaft... was ein "nicht ausfahren" der Menü's zur Folge hat.

    Jetzt noch etwas zur Menütransparenz:
    Bei Opera gibt es im Hinblick auf die Menütransparenz noch etwas zu beachten, denn auch wenn sich Opera nicht als solcher ausgibt funktioniert die "standard-transparenz" nicht. Daher muss man in der ypMenu.php folgendes einstellen:

    [code:1:950f424b31]
    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:950f424b31]

    Das png Bild welches man dort einstellt ist jenes das bei Opera als Menühintergrund benutzt wird. Dieses png Bild muss man dementsprechend seinem Menü anpassen sowohl farblich als auch von der transparenzstärke her.

    Um sicherzustellen, dass das Menü von der transparenz her in Opera, IE, Firefox und anderen Browsern gleich aussieht sollte man sich vielleicht folgenden code(ab Zeile 275) in der ypMenu.php anschaun:

    [code:1:950f424b31]
    // ie >= 5.5 on win and mozilla can render transparency by css
    if(($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'msie' AND $clientinfo['VERSION'] >= 5.5) OR ($clientinfo['SYSTEM'] == 'win' AND $clientinfo['BROWSER'] == 'net')) {
    $filter = true;
    $style = 'style="-moz-opacity:.82; filter:alpha(opacity=82); background-color: #d3d3d3"';
    // Mr. IE on Mac needs a special treatment - a transparent png in a img tag in the background
    } elseif($clientinfo['SYSTEM'] == 'mac' AND ($clientinfo['BROWSER'] == 'msie')) {
    $pngimg = true;
    $style = 'style="background-color: transparent"';
    // Opera and Mozilla on Mac can handle transparent pngs
    } elseif(($clientinfo['SYSTEM'] == 'mac' AND $clientinfo['BROWSER'] == 'net') OR ($clientinfo['BROWSER'] == 'opera')){
    $pngbg = true;
    $style = 'style="background-image: url(''. $this->transBg .'');"';
    // no transparency for the rest - go get firefox!
    } else {
    $bg = true;
    $style = 'style="background-color: transparent"';
    $appendix = 'b';
    }
    [/code:1:950f424b31]

    Wie man sieht wird hier unter anderem die Transparenz für den MSIE und den Mozilla/Firefox festgelegt... ( style="-moz-opacity:.82; filter:alpha(opacity=82); background-color: #d3d3d3" )
    Die anderen Einstellungen würde ich hier unveränder lassen.. es sei denn man hat Ahnung ;)

    Ich hoffe hiermit einigen weitergeholfen zu haben, was die Browserkompatibilität und Transparenz des Menü's angeht ... :)

    MfG

  • solar solar
    T3PO
    0 x
    31 Beiträge
    0 Hilfreiche Beiträge
    09. 03. 2005, 19:00

    Hallo,

    wie bekomme ich den das Menu mit TemplaVoila umgesetzt?

    Die Marker:

    [quote:ea4dba56cb] marks.MENU = COA
    marks.MENU {
    10 < temp.ypMenu
    20 < temp.user_menu
    } [/quote:ea4dba56cb]

    gehen ja so nicht.

    Wie und wo setze ich temp.user_menu ?

    Vielen Dank für eure Hilfe

  • s.sach s.sach
    Sternenflotten-Admiral
    0 x
    159 Beiträge
    0 Hilfreiche Beiträge
    18. 03. 2005, 14:58

    Hi Leute,

    jetzt mache ich schon seit Tagen mit diesem Menü rum und verzweifele bald. Habe mich ganz genau an die Anleitung gehalten, jedoch wird bei mir kein Menü angezeigt. Content usw. wird angezeigt, jedoch das Menü nicht.

    Ich denke mein Fehler liegt hier: In Beispiel steht ja unter temp.ypMenu "... Deshalb kommt auch nur wenig TS in das MainTemplate(externes Template einbinden)". Wie binde ich dies genau ein? Wird es nicht schon durch "10 < temp.ypMenu" eingebunden?

    Habe das Template "temp.ypMenu" mal bei "Include base template" eingetragen. Dann kommt jedoch die Fehlermeldung "Fatal error: Call to undefined function: getmountpointinfo() in /www/htdocs/xxxxxxx/fileadmin/scripts/ypMenu/ypMenu.php on line 101". Die ID der Rootseite habe ich jedoch korrekt eingetragen.

    Und was hat es mit "20 < temp.user_menu" auf sich?

    Vielen Dank für Eure Hilfe!

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    18. 03. 2005, 16:11

    Hi s.sach,

    das externe Template bildest du schon richtig ins MainTemplate ein... also

    1. das externe Template ins "Include base template" des MainTemplates eintragen

    2. und dann noch ins MainTemplate die "platzhalter (temp.blablubb) " aus dem externen Template durch "<" einbeziehen...

    also so in etwa:
    [code:1:0fd56c015e]
    ... weiterer TS-code

    marks.MENU = COA
    marks.MENU {
    10 < temp.ypMenu
    20 < temp.user_menu
    }

    ... weiterer TS-code
    [/code:1:0fd56c015e]

    < temp.ypMenu (hierdurch wird das menü an sich angebunden, also der TS-code wird übergeben [bestimmt wo genau das menü erscheinen soll])

    < temp.user_menu (diese übergabe beinhaltet einen teil des menü-quellcodes, der dann in der html-ausgabe entscheident ist [dieser teil kann irgendwo in der seite ausgegeben werden])

    hoffentlich war ich auch nur halbwegs verständlich 8-)

    MfG

  • s.sach s.sach
    Sternenflotten-Admiral
    0 x
    159 Beiträge
    0 Hilfreiche Beiträge
    18. 03. 2005, 16:41

    @n-joy

    Danke. Hab es gerade mal auf einem anderen Account bei einem anderen Provider versucht. Dort funktioniert es. Kann es sein, dass ein Provider das Ausführen von Javascript unterbindet?

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    19. 03. 2005, 02:26

    nein, javascript kann vom server her nicht unterbunden werden ! (es sei denn da läuft ein script durch alle files und macht den js-code unschädlich - was aber eh nicht so sein wird ^^)

    also nein, javascript wird nie von servern unterdrückt, da es vom client ausgeführt/verarbeitet wird !

    evtl. hats auf dem anderen Provider funktioniert weil du nicht die gleiche konfiguration benutzt hast ? ..also nicht die selben extensions usw. ? :) (es gibt recht viele konflikte zwischen den ganzen extensions . . . und auch den eingebauten scripten )

    MFG

  • s.sach s.sach
    Sternenflotten-Admiral
    0 x
    159 Beiträge
    0 Hilfreiche Beiträge
    19. 03. 2005, 21:04

    Also ich hatte auf dem Account, wo das Menü nichtfunktionierte noch Typo 3.6 Beta2 laufen. Hab es auf 3.6.2 upgedatet und nun funktioniert das Menü #paralyzed#