sicher geht das, man müsste nur das php skript anpassen.
www.meade.de
wenn ich java deaktiviere, zeigt es bei meade nur das oberste level an. auf meiner seite aber alle unterpunkte auch. dies versaut dann die ganze seite. an was liegt das?
ohne java -> kein slideout
Hiho,
kämpfe mir auch gerade meinen Weg durch diesen sagenhaften Thread. Klasse Arbeit!
Kann mir jemand sagen, welche Funktion die jslib.js in dem Packet von Liberation hat? Die darin definierten Funktionen und Vars scheinen nirgendwo benutzt zu werden. Und zumindest in FireFox läuft das Menü bei mir auch ohne dieses JS prächtig.
Ich kämpfe gegenwärtig noch mit IE. Obwohl FireFox alles sauber darstellt, werden die Slideouts in IE horizontal verschoben und nur mit halber Breite dargestellt. Falls jemand den Effekt kennt, bin ich für einen Hinweis dankbar. Ansonsten such ich halt weiter...
Ok, das Problem mit IE6 ist gelöst:
Bei zentriertem Seiteninhalt ("text-align: center" fürs BODY-Tag oder für ein DIV Tag das das Menü kapselt) MUSS das Menü unbedingt nochmal in einem inneren DIV verpackt werden, das ein "text-align: left" besitzt. Sonst tritt der Effekt auf, dass die Slidemenüs im IE nach rechts verschoben und auf halbe Breite beschnitten sind. Liberation hat diese Center-Konstruktion in diesem Thread auch genau so demonstriert (Posting vom 26.04.2005 [10:35]).
Nach meinen Erfahrungen muss besagter innerer Container aber unbedingt noch eine width bekommen, da er sonst im IE auf voll Seitenbreite expandiert wird, und dadurch das Centering verloren geht. Schwierig wirds, wenn die Breite der obersten Menüebene (GMENU) nicht konstant ist (z.B. weil man dem Besitzer der Website die Möglichkeit gibt, weitere Menüpunkte hinzuzufügen). Ich habe daher dem inneren Container ums Menü eine "width: 1px" und ein "white-space: nowrap" gegeben. Das wiederum mögen ordentliche Browser (FireFox) nicht. Daher steht der ganze Bettel in einem CSS, das nur von IE ausgewertet wird:
<!--[if IE]>
<link href="fileadmin/templates/css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
Was für eine Äktschen - mal wieder alles nur für den geliebten IE.
Vielleicht findet ja jemand einen sauberen Weg, ohne Browserunterscheidung im CSS...
Es bleibt aber die Frage, wozu die jslib.js dienen soll. Mein Menü funktionieren jetzt vollständig ohne diese Datei.
Hi,
nachdem ich eigentlich alle Probleme mit Hilfe des Forums lösen konnte stehe ich jetzt vor der letzten Hürde. Menü funktioniert soweit, Submenus erscheinen an der richtigen Stelle, aber:
In der obersten Menüebene wird nach jedem Punkt umgebrochen, ergo: Die Punkte der ersten Menüebene stehen alle untereinander. Im Quelltext finde ich auch ein <br>. Und das bekomme ich einfach nicht weg.
Im Setup ist auch kein wrap mit <br /> oder ähnliches zu finden, CSS gibt auch keinen Hinweis. Bin nach der Anleitung unter http://typo3.kj187.de/typo/t3tutorials/typoscript/menus/?detail=39 vorgegangen und hab die Datein von dort auch so übernommen.
Jemand vielleicht eine Idee, was der Grund sein könnte?
Danke.
Hi,
du hast doch garkein br im code und wrap hast du auch keinen im ts. Deine menupunkte sind einfach aneinander gereite "a" Tags und die stehen nun mal untereinander.
float: left hilft da oder ein ein warp mit span tag oder ein mit dvi tag und float: left oder als liste (ul, li) mit float: left. Viele wege führen nach rom aber etwas html wissen sollte man schon haben.
That's it! 😃
Danke!
hallo zusammen.
habe ebenfalls das ganze übernommen, von überall her und probiert und probiert :-)
habe momentan das ganze von: http://typo3.kj187.de/typo/t3tutorials/typoscript/menus/?detail=39
mein fehler, der erscheint: Parse error: parse error, unexpected T_STRING in C:\Programme\typo3\htdocs\typo3wamp\fileadmin\scripts\ypMenu\ypmenu.php on line 197
gibt's denn irgendwo ein komplettes beispiel, mit template dass auf anhieb funktioniert ? weiss, klingt jetzt ein wenig faul... bin aber schon ein paar tage dran am anpassen und hab noch nichts gscheites hingekriegt *verzweifel...*
danke schön
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'
Bild: exotissimo.com/…/ypmenu.jpg
und vom template voila:
Bild: exotissimo.com/…/templavoila.jpg
Ich wuerde mich ueber jegliche Hilfe von Euch sehr freuen. Merci schon mal im Vorraus...
Hi Leute,
zuerst mal dickes Lob an die Entwickler! Das Menü ist echt ma geil!
hab mir jetzt den ganzen Thread durchgelesen und das Menü auch schon probiert zu testen. (hat lange gedauert 🙂).
Nun weiß ich nicht so recht, aber bekomme die Menüpunkte untereinandere gezeigt, nicht horizontal. Und es klappt nichts aus.
Habe auch nur einen Subpart im Template gesetzt?
Dazu für das ypMenu ein neues Template angelegt und im Haupttemplate als Basis Template hinzugefügt, dürfte doch auch gehen oder?
Dann hab ich in einem anderen Thread, der von diesem gelinkt wurde ein vertikales Menü gefunden, das hab ich getestet und da klappt es aus.
Gibt es vielleicht schon ein Tutorial für das Horizontale Menü zum einbinden?
Über Hilfe würde ich mich sehr freuen 🙂
MfG Daniel
Hi Leute,
hab das Menü nun richtig einbinden können. Aber hab ein problem, er nimmt die CSS Formatierungen nicht an.
Habe die CSS Angaben in mein Haupt Stylesheet mit reingeschrieben. Hab im Quellcode nachgesehen, er vergibt dem Menü auch die Klassen. Trotzdem zeigt er mir das ganze Menü in Blau, und ohne Hintergrund, was ich nicht verstehe?
Gibt es etwas besonderes mit der formatierung?
mfG
Ich schliesse hier, da das Thema zu lang ist und es mittlerweile weit weg vom Thema ist.
Bitte macht für Fragen ein neues Thema auf.
@daniel_m_ww poste einen Link und stell die Frage unter einem CSS-betreffenden Bereich, dann wird Dir auch schnell geholfen