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


  • mstuebner mstuebner
    Jedi-General
    0 x
    1370 Beiträge
    0 Hilfreiche Beiträge
    11. 02. 2005, 21:17

    Erst mal: Sehr schöne Sache, danke.

    Man sollte sich unbedingt die bunte Version auf http://steinhauer-gmbh.net/_tmp/ypMenu/ ansehen und auch ganz genau auf die Pfade, auch im Php achten, dan funktioniert es auch. ;-)

  • mstuebner mstuebner
    Jedi-General
    0 x
    1370 Beiträge
    0 Hilfreiche Beiträge
    11. 02. 2005, 22:37

    @n-joy:

    Soweit lief ja auch alles bestens, nur wo ich mir die Karten lege ist:

    Wie setzen sich die CSS-Klassen und IDs zusammen. Ich finde in der fertigen Seite jede Menge IDs und Klassen a la mm668Container zu denen ich keine Definition finde. Auch das Studium von writeCSS() brachte mich da nicht weiter.

    KannSt Du da noch einen Hinweis geben?

  • n-joy n-joy
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    14. 02. 2005, 10:37

    [quote:d220c43b95="mstuebner"]@n-joy:

    Soweit lief ja auch alles bestens, nur wo ich mir die Karten lege ist:

    Wie setzen sich die CSS-Klassen und IDs zusammen. Ich finde in der fertigen Seite jede Menge IDs und Klassen a la mm668Container zu denen ich keine Definition finde. Auch das Studium von writeCSS() brachte mich da nicht weiter.

    KannSt Du da noch einen Hinweis geben?[/quote:d220c43b95]

    moin mstuebner,

    ich hoffe, dass ich dir jetzt nichts falsches erzähle, aber die unterschiedlichen Bezeichnungen beziehen sich im Grunde nur auf die ID's ("a la mm668Container") welche in diesem Fall nicht für's Zuweisen deiner CSS-klassen genutzt werden . . .

    Also: um das Menü über CSS zu definieren brauchst du nur die class="" angaben zu beachten... wobei man eigentlich auch auf die ID's zugreifen könnte (wenn man für ein bestimmten Menüpunkt einen anderen CSS-style definieren möcht...)

    In dem CSS-teil des Beispiels stehen eigentlich alle CSS-klassen um sein Menü 100%'ig anzupassen :)

    MfG

  • mstuebner mstuebner
    Jedi-General
    0 x
    1370 Beiträge
    0 Hilfreiche Beiträge
    14. 02. 2005, 20:05

    [quote:28834453bc="n-joy"]ich hoffe, dass ich dir jetzt nichts falsches erzähle, aber die unterschiedlichen Bezeichnungen beziehen sich im Grunde nur auf die ID's ("a la mm668Container") welche in diesem Fall nicht für's Zuweisen deiner CSS-klassen genutzt werden . . .[/quote:28834453bc]
    Ich bin mir sicher, dass ich nicht zu 1% nachvollziehen konnte was Du vermitteln wolltest. ;-)

    Die IDs die im finalen Code der Site stehen können ja in keinem CSS File stehen, da sie die ID der Seite enthalten. Ergo gehe ich davon aus, dass eine oder verschiedene der Klassen als Template benutzt werden, nur konnte ich noch keinen definitiven Zusammenhang erkennen. Versuche es aber weiter.

  • F.Eppmann F.Eppmann
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    25. 02. 2005, 20:31

    wow, echt super, was du da zusammengestellt hast.

    ich beschäftgige mich schon länger mit diesem menu und habe es auch schon mit typo zum laufen bekommen. allerdings finde ich im mom den fehler nicht.

    weiss vllt jemand auf anhieb, wenn er sich den link anguckt, woran es liegen könnte.

    http://www.volldiegosse.de/t3

    mfg felix

  • mstuebner mstuebner
    Jedi-General
    0 x
    1370 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2005, 18:48

    [quote:162a6db4e2="F.Eppmann"]http://www.volldiegosse.de/t3[/quote:162a6db4e2]
    Ist das Absicht, dass die Hauptmenüpunkte untereinander angeordnet sind und die Untermenüs an ganz anderen Stellen aufgehen? Firefox 1.0.

  • F.Eppmann F.Eppmann
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2005, 19:44

    [quote:05432be28a="mstuebner"][quote:05432be28a="F.Eppmann"]http://www.volldiegosse.de/t3[/quote:05432be28a]
    Ist das Absicht, dass die Hauptmenüpunkte untereinander angeordnet sind und die Untermenüs an ganz anderen Stellen aufgehen? Firefox 1.0.[/quote:05432be28a]

    ganz genau das sind meine probleme:

    1. die menüpunkte werden untereinander dargestellt, anstatt nebeneinander
    2. die submenus tauchen in jedem browser (ie, firefox, opera) woanders auf. mal wird position:relative berücksichtigt, mal nicht.
    3. woher kommen diese kleinen kreuzchen in den linken oberen ecken (komischerweise beim ersten menüpunkt nicht)
    4. wie kann ich die qualität der bilder höher stellen? bzw. wieso sehen die buttons so "krusselig" aus?

    danke schonmal

    mfg felix

  • mstuebner mstuebner
    Jedi-General
    0 x
    1370 Beiträge
    0 Hilfreiche Beiträge
    27. 02. 2005, 11:08

    [quote:e0beaedebc="F.Eppmann"]1. die menüpunkte werden untereinander dargestellt, anstatt nebeneinander[/quote:e0beaedebc]
    Das scheinst Du jetzt ja im Griff zu haben. Was hast Du denn geändert?

    [quote:e0beaedebc="F.Eppmann"]3. woher kommen diese kleinen kreuzchen in den linken oberen ecken (komischerweise beim ersten menüpunkt nicht)[/quote:e0beaedebc]
    Irgendwelche Kreuze habe ich noch nicht sehen können.

    [quote:e0beaedebc="F.Eppmann"]4. wie kann ich die qualität der bilder höher stellen? bzw. wieso sehen die buttons so "krusselig" aus?[/quote:e0beaedebc]
    Alles was die Erstellung der Grafiken der ersten Ebene betrifft findest Du in diesem Abschnitt:[code:1:e0beaedebc]temp.ypMenu {
    1 = GMENU [/code:1:e0beaedebc]

  • F.Eppmann F.Eppmann
    Padawan
    0 x
    32 Beiträge
    0 Hilfreiche Beiträge
    27. 02. 2005, 12:54

    ja, 1 und 3 hab ich gestern noch beseitigen können. bei 4 hänge ich im mom trotzdem noch fest.

    hier mal ein auszug aus meinem TS:

    [code:1:717c3acccd]
    temp.ypMenu = HMENU
    temp.ypMenu.entryLevel = 0
    temp.ypMenu {
    1 = GMENU
    1 {
    IProcFunc = user_menu->firstLevel
    expAll = 1
    wrap = |
    NO = 1
    NO {
    wrap = |
    XY = 160,25
    30 = IMAGE
    30.file = fileadmin/page2/images/btn_bg.jpg
    30.file.format = jpg
    30.file.quality = 100
    50 = TEXT
    50 {
    text.field = title
    fontSize = 18
    align = center
    fontFile = fileadmin/fonts/teamspirit.ttf
    fontColor = #4B4B4B
    blur = 20
    offset = 0,20
    niceText = 0

    }

    }
    [/code:1:717c3acccd]

    und die sache mit den submenüs ist auch noch da. opera und IE zeigen es mittlerweile korrekt an. nur der firefox positioniert das menü ganz links.