Zum Inhalt springen

[Beispiel] ypMenu ( GMENU horizontal , ypSlideOutMenus )

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

Tags: JavaScript & AJAX, Tipp

n-joy ·

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 🙂

ypMenu (ypSlideOutMenu) in Typo3

Dateien (copyright haben die jeweiligen Autoren):
- ypMenu.php ( per includeLibs in Typo3 einbinden )
- ypSlideOutMenus.js ( im header laden )
- ypMenu.css ( in eure CSS-datei übernehmen oder im header mitladen )

[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

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)

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

Das dazugehörige XHTML-template ist natürlich nur als Beispiel/Vorlage gedacht!

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

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.

[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;
}

In der ypMenu.php wird man noch ein paar kleinigkeiten anpassen müssen...

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

MfG

p.s. ypMenu kommt von Ersteller der www.meade.de

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?

n-joy ·
mstuebner schrieb

@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?

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 ·
n-joy schrieb

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 . . .

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 ·

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

F.​Eppmann ·
mstuebner schrieb

Ist das Absicht, dass die Hauptmenüpunkte untereinander angeordnet sind und die Untermenüs an ganz anderen Stellen aufgehen? Firefox 1.0.

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 ·
F.Eppmann schrieb

1. die menüpunkte werden untereinander dargestellt, anstatt nebeneinander

Das scheinst Du jetzt ja im Griff zu haben. Was hast Du denn geändert?

F.Eppmann schrieb

3. woher kommen diese kleinen kreuzchen in den linken oberen ecken (komischerweise beim ersten menüpunkt nicht)

Irgendwelche Kreuze habe ich noch nicht sehen können.

F.Eppmann schrieb

4. wie kann ich die qualität der bilder höher stellen? bzw. wieso sehen die buttons so "krusselig" aus?

Alles was die Erstellung der Grafiken der ersten Ebene betrifft findest Du in diesem Abschnitt:

temp.ypMenu {
     1 = GMENU
F.​Eppmann ·

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:

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
                  
               }
           
          }

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.

mstuebner ·
F.Eppmann schrieb

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.

Das css ist das originale aus dem Beispiel? Mit selbigem öffnet mein Firefox auf meiner Site das Untermenü korrekt, auf Deiner Site, wie Du selbst schreibst, ganz links.

Nach kurzem Überfliegen Deines PageSource sehe ich aber, dass Du auch den cRoot Container entsorgt hast, zu welchem die Untermenüpunkte ausgerichtet sind. Bau mal den cRoot Div um Deine Seite wieder herum, und Du wirst sehen, dass die Untermenüs dann nicht am Seitenrand, sondern am Rand des cRoot-Div's aufgehen.

Therealherby ·

Hallo,

vielen vielen dank, mit der Anleitung habe sogar ich es hinbekommen :-) Koennte man gleich in die Doku mit einbinden ;-)

Doch ich habe da noch 1-2 Fragen.

Wie bekomme ich eine transparenz wie auf dieser Seite hin?
http://cerutti.abix.ch/

und a) ist es möglich für jeden Menuehauptpunkt eine andere Farbe zu waehlen? Und wo kommt dass .mmContent aus dem CSS her? Irgendwo muss es doch gesetzt sein - doch vielleicht habe ich auch nicht richtig geschaut... aber gefunden hab ichs dennoch nicht.

Bye und Gruss
Herby

Alex ·

Ist ypMenu auch mit anderen Browsern kompatibel ( Opera, Firefox?)
An welchen stellen muss man eventuell modifizieren?

Vielen Dank.

Alex

EDIT:
:o Oh lesen müsste man können steht ja schon zwei Beiträge weiter oben :o

mstuebner ·
Alex schrieb

Ist ypMenu auch mit anderen Browsern kompatibel ( Opera, Firefox?)

Was heisst "mit anderen Brwosern"? Was gibt es denn noch, neben Firefox und Opera? ;-)

toyde ·
mstuebner schrieb
Alex schrieb

Ist ypMenu auch mit anderen Browsern kompatibel ( Opera, Firefox?)

Was heisst "mit anderen Brwosern"? Was gibt es denn noch, neben Firefox und Opera? ;-)

Safari z.B. oder andere Browser, via PDA, etc.

mstuebner ·
toyde schrieb

Safari z.B. oder andere Browser, via PDA, etc.

Das ist ok, aber ich glaube der OP meinte was anderes. :-)

Alex ·

Was heisst "mit anderen Brwosern"? Was gibt es denn noch, neben Firefox und Opera?

Naja, ich verwende IE #paralyzed# weil Mr. Gates den so schön verbreitet hat.

Alle meine Browsers aus AWStats:

MS Internet Explorer (Versions) 48694 81.8 %
Unknown 6085 10.2%
Netscape (Versions) 3924 6.5 %
Links 398 0.6 %
Opera 287 0.4 %
Konqueror 73 0.1 %
Nokia Browser (PDA/Phone browser) 28 0 %
LibWWW 8 0 %
UP.Browser (PDA/Phone browser) 4 0 %
Galeon 1 0 %
WebTV browser 1 0 %
EmailSiphon 1 0 %

Alex Weber ·

@n-joy: sehr sehr geile sache, vielen dank das du den code hier postest. habe das menü wie von dir beschrieben übernommen. funktioniert auch alles super.

zwei fragen hätte ich aber dann trotzdem noch:

1. was muss ich alles anpassen um das menü auch vertikal zum laufen zu bekommen? oder hat da eventuell schon jemand was erstellt was er preisgeben würde?

2. ist es auch möglich die erste ebene nur als textlinks generieren zu lassen?

Moeffz ·

Hallo,
ich hatte vergleichbares schon unter den 'Anfängerfragen gepostet. Ich wollte obiges Menü auch bei mir integrieren und habe folgende Probleme:

a) Ich habe keine Grafiken zur Verfügung und habe statt dessen entsprechend eine backColor gesetzt (vgl. Code)
Die entsprechende Variable im php-Code habe ich auskommentiert (auch wenn jetzt erstmal der MAC IE außen vor bleibt.

b) Die Zustände IFSUB und IFSUBRO hatten den Effekt, dass beim RO die Schrift unsichtbar wurde. Habe sie entsprechend herausgenommen und das grafische Problem ist gelöst. Muss ich diese Zustände bei Deinem Beispiel verwenden?

Bei mir tritt nun folgendes Problem auf:
Beim RO über einen Menüpunkt, der Unterpunkte hat, geschieht nichts. Auch die Hintergrundfarbe ändert sich nicht.

Mein Code schaut folgendermaßen aus (Untermenue ist der Name der Markierung; ich habe alles ins Main-Template gebaut):

includeLibs.ypMenu = fileadmin/para/scripts/ypMenu.php
      Untermenue.special.value = 1
      marks.Untermenue.entryLevel = 1
      marksUntermenue = HMENU
      marks.Untermenue {
         1 = GMENU
         1 {
            IProcFunc = user_menu->firstLevel
            expAll = 1
            wrap = |
            NO = 1
            NO {
               wrap = |
               XY = [50.w]+20, 31
               backColor = #CEDBD9
               50 = TEXT
               50 {
                    [...]
               }
          }

          RO < .NO
          RO = 1
          RO {
               backColor = #E7EDEC
               50.fontColor = #00463A
          }
     }    

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

user_menu = USER
user_menu.userFunc = user_menu->menuEnd

Ich hoffe, ich erschlage Euch nicht, aber ich komme einfach nicht auf einen grünen Zweig 🙁

Therealherby ·

Hallo,

Ist ypMenu auch mit anderen Browsern kompatibel ( Opera, Firefox?)

Ja, siehe http://cerutti.abix.ch/

An welchen stellen muss man eventuell modifizieren?

Tja diese Frage stelle ich mich auch. Benutz mal die Suchfunktion "Beispiel ypmenu", da muesste ne Anleitung kommen. Im Grunde die PHP & Css Datei, die regeln alles designtechnische.

Vielleicht kann mir mittlerweile jemand sagen wie ich die Transparenz fuer Opera, InternetExplorer & Co hinbekomme (Firefox geht's schon).

Ich verspreche auch alles gut kommentiert hier preiszugeben wenn ich fertig bin 8-)

Bye und Gruss
Herby