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]
