Hallo,
ich habe ein Navigationsmenü mit eigenen Buttons erstellt. Dazu verwende ich folgenden TS-Code:
temp.navigation = COA
temp.navigation.10 = HMENU
temp.navigation.10.special = list
temp.navigation.10.special.value = 67,10,9,8,7,5,39,4,6
temp.navigation.10.1 = GMENU
temp.navigation.10.1 {
noBlur = 1
NO = 1
NO {
5 = IMAGE
5.file = {$mnImagePath}main01_off.gif || {$mnImagePath}main02_off.gif || {$mnImagePath}main03_off.gif || {$mnImagePath}main04_off.gif || {$mnImagePath}main05_off.gif || {$mnImagePath}main06_off.gif || {$mnImagePath}main07_off.gif || {$mnImagePath}main08_off.gif || {$mnImagePath}main09_off.gif
XY = [5.w],[5.h]
}
ACT < .NO
ACT = 1
ACT {
5 = IMAGE
5.file = {$mnImagePath}main01_on.gif || {$mnImagePath}main02_on.gif || {$mnImagePath}main03_on.gif || {$mnImagePath}main04_on.gif || {$mnImagePath}main05_on.gif || {$mnImagePath}main06_on.gif || {$mnImagePath}main07_on.gif || {$mnImagePath}main08_on.gif || {$mnImagePath}main09_on.gif
}
RO < .NO
RO = 1
RO {
5 = IMAGE
5.file = {$mnImagePath}main01_over.gif || {$mnImagePath}main02_over.gif || {$mnImagePath}main03_over.gif || {$mnImagePath}main04_over.gif || {$mnImagePath}main05_over.gif || {$mnImagePath}main06_over.gif || {$mnImagePath}main07_over.gif || {$mnImagePath}main08_over.gif || {$mnImagePath}main09_over.gif
}
}
Das funktioniert auch wunderbar und ohne Probleme. Ich möchte jetzt aber dieses Menü mit einem TMENU_LAYERS Menü verbinden. Also beim RollOver über das oben erzeugte Menü soll dann darunter das Layer Menü erscheinen. Leider schaffe ich es irgendwie nicht, das alles zu kombinieren.
Hier noch unabhängig davon mein TMENU_LAYERS Code:
temp.navigation.20 = HMENU
temp.navigation.20.special = list
temp.navigation.20.value = 67,10,9,8,7,5,39,4,6
temp.navigation.20.1 = TMENU_LAYERS
temp.navigation.20.1 {
layerStyle = position: absolute; width: 150px; VISIBILITY:hidden; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 11px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; FONT-FAMILY: arial,helvetica; COLOR: #00526A; BACKGROUND-COLOR: #ceefff; layer-background-color: CEEFFF;
expAll = 1
relativeToTriggerItem=1
relativeToTriggerItem.addHeight = 1
dontFollowMouse=1
freezeMouseover = 1
hideMenuWhenNotOver = 10
hideMenuTimer = 500
leftOffset = 9
target = page
wrap= <table width="350" height="25" border="0" cellspacing="1" cellpadding="0"><tr>|</tr></table>
NO {
allWrap = <td nowrap="nowrap" valign="top" style="background: #ceefff;">|</td>
RO = 1
linkWrap = <strong>|</strong>
}
}
#ZWEITE MENÜ EBENE
temp.navigation.20.2 = TMENU_LAYERS
temp.navigation.20.2 {
layerStyle = position:absolute; width: 105px; VISIBILITY:hidden;
expAll = 1
relativeToTriggerItem=1
relativeToParentLayer = 1
relativeToTriggerItem.addWidth=1
dontFollowMouse=1
freezeMouseover = 1
hideMenuWhenNotOver = 10
hideMenuTimer = 500
topOffset = 1
leftOffset = -1
wrap= <table width="150" border="0" cellspacing="0" cellpadding="0" style="background: #ceefff; border-bottom: 1px solid #00526A;">|</table>
NO {
allWrap = <tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00526A; border-right: 1px solid #00526A; border-left: 1px solid #00526A;">|</td></tr>
linkWrap = |
RO=1
RO_chBgColor = #ececec | #ceefff | tmenuID
subst_elementUid = 1
}
temp.navigation.20.2.IFSUB < .20.2.NO
temp.navigation.20.2.IFSUB = 1
temp.navigation.20.2.IFSUB.freezeMouseover = 1
Kann mir vielleicht jemand dabei helfen, beides richtig zu kombinieren?
Vielen Dank!
Sares
Ich gehe mal davon aus, dass du nur die zweite Menüebene übernehmen willst... Die erste ist ja das selbe wie dein eigenes Menü, dann musst du doch eigentlich nur hinter deinen ersten Code folgenden Teil deines zweiten Codes hängen (aber natürlich von temp.navigation.20.2 auf temp.navigation.10.2 ändern)
#ZWEITE MENÜ EBENE
temp.navigation.10.2 = TMENU_LAYERS
temp.navigation.10.2 {
layerStyle = position:absolute; width: 105px; VISIBILITY:hidden;
expAll = 1
relativeToTriggerItem=1
relativeToParentLayer = 1
relativeToTriggerItem.addWidth=1
dontFollowMouse=1
freezeMouseover = 1
hideMenuWhenNotOver = 10
hideMenuTimer = 500
topOffset = 1
leftOffset = -1
wrap= <table width="150" border="0" cellspacing="0" cellpadding="0" style="background: #ceefff; border-bottom: 1px solid #00526A;">|</table>
NO {
allWrap = <tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00526A; border-right: 1px solid #00526A; border-left: 1px solid #00526A;">|</td></tr>
linkWrap = |
RO=1
RO_chBgColor = #ececec | #ceefff | tmenuID
subst_elementUid = 1
}
temp.navigation.10.2.IFSUB < .20.2.NO
temp.navigation.10.2.IFSUB = 1
temp.navigation.10.2.IFSUB.freezeMouseover = 1
Grüße
Christian
Hallo Christian,
danke für Deine schnelle Antwort!
Leider funktioniert Dein Vorschlag nicht. Wenn ich das so ändere, dann wird das Layer Menü zwar angezeigt, aber nicht erst beim RollOver, sondern immer und das auch nur für den jeweils aktiven Menüpunkt. Der RollOver funktioniert gar nicht, weder beim aktiven Button noch bei den anderen.
Ich denke mal, daß man vielleicht bereits im GMENU im Zustand RO irgendwo ansetzen müsste. Habe aber schon zahlreiche Versuche unternommen und es hat bis jetzt leider nichts funktioniert.
Vielleicht fällt Dir ja nochwas dazu ein.
Vielen Dank!
Sares
Tja,
habe eigentlich noch nie mit dem LayersMenü gearbeitet... kann natürlich sein, dass das erstmal nur mit seinesgleichen funktioniert, aber im Prinzip hat es wahrscheinlich mit dem Javascript zu tun.
Ich schau es mir später mal an.
Ansonsten ginge sicher ein TMENU mit <ul> und viel CSS. Halt ein DHTML Menü.
Dazu gibts ganz viele Anleitungen über Google (menu css ul dhtml) z.B. hier ist eine der ersten die ich bei Google finde:
http://www.seoconsultants.com/css/menus/tutorial/
Da gibts auch ein DropDown-Menü.
Hallo Christian,
danke für den Hinweis mit den DHTML Menüs. Ich habe mir da schon zahlreiche Möglichkeiten angeschaut, allerdings wäre ich eher an einer TYPO3 Lösung mit Boardmitteln interessiert.
Grundsätzlich funktionieren die beiden einzelnen Teile ja schon, nur die Kombination aus beiden macht noch Probleme. Ich werde mich weiter durch die Dokumentation und das WWW wühlen, vielleicht finde ich ja noch eine praktikable Lösung.
Wenn Du Dir das auch noch weiter anschauen würdest, wäre ich Dir natürlich sehr dankbar.
Schönen Sonntag noch und vielen Dank!
Sares
Hallo Sares,
ich habe mir dein Menü nur mal kurz angeschaut.
Mir scheint, es fehlt eine Klammer am Schluss.
Gruß Harald
Hallo Harald,
danke für Deinen Hinweis, da hast Du recht. Die fehlende Klammer am Schluss ist mir wohl beim reinkopieren entwischt.
Tja, leider ist das aber nicht die Ursache meines Problems, das liegt woanders, da beide Teile ja für sich getrennt problemlos funktionieren. Nur die Kombination macht wie bereits erwähnt Probleme.
Danke aber für das aufmerksame Durchsehen des TypoScript Codes!
Grüße
Sares
Wie gesagt setze ich TMENU_LAYERS nie ein, daher wäre es ganz nett, wenn du mir mal den Quellcode der Seite im FE zeigen könntest, wenn da das funktionierende Layersmenü drin ist. Damit ich weiß was TYPO3 da produziert.
Wie gesagt setze ich TMENU_LAYERS nie ein, daher wäre es ganz nett, wenn du mir mal den Quellcode der Seite im FE zeigen könntest, wenn da das funktionierende Layersmenü drin ist. Damit ich weiß was TYPO3 da produziert.
Hallo Christian,
ok, wenn du Dir das anschauen willst, hier der HTML-Source-Code, vielleicht hilft Dir das ja, würde mich freuen.
Wie gesagt, ich glaube halt, daß der Schlüssel zur Lösung des Problems der ist, daß man irgendwie z.B. den RO Zustand erweitert und als Trigger für das Layer Menü nutzt. Zumindest würde das irgendwie logisch sein.
Vielen Dank schon mal
Sares
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.com/ and http://typo3.org/
-->
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_7cf6ba6523.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<meta name="language" content="en" />
<meta name="robots" content="index,follow" />
<meta name="audience" content="all" />
<meta name="title" content="Testarea" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/fr/main/css/styles_fr.css" />
<title>Testarea</title>
<meta name="generator" content="TYPO3 4.0 CMS" />
<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>
<script type="text/javascript" src="typo3/sysext/cms/tslib/media/scripts/jsfunc.layermenu.js"></script>
<script type="text/javascript" src="typo3temp/javascript_5697e10da4.js"></script>
<script type="text/javascript" src="typo3temp/javascript_7df7b03ba3.js"></script>
<script type="text/javascript" src="typo3temp/javascript_3469cd83e1.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
<!--
if (version == "n3") {
img78_9a60_0_n=new Image(); img78_9a60_0_n.src = "typo3temp/menu/d6df4d1da4.gif";
img78_9a60_0_h=new Image(); img78_9a60_0_h.src = "typo3temp/menu/8558d59165.gif";
img77_9a60_1_n=new Image(); img77_9a60_1_n.src = "typo3temp/menu/30a9f7e310.gif";
img77_9a60_1_h=new Image(); img77_9a60_1_h.src = "typo3temp/menu/92d7264139.gif";
img76_9a60_2_n=new Image(); img76_9a60_2_n.src = "typo3temp/menu/e72e626ee2.gif";
img76_9a60_2_h=new Image(); img76_9a60_2_h.src = "typo3temp/menu/50a3f4a60c.gif";
img75_9a60_3_n=new Image(); img75_9a60_3_n.src = "typo3temp/menu/a521595007.gif";
img75_9a60_3_h=new Image(); img75_9a60_3_h.src = "typo3temp/menu/13b08e7b9a.gif";
img74_9a60_4_n=new Image(); img74_9a60_4_n.src = "typo3temp/menu/7a6b943cbf.gif";
img74_9a60_4_h=new Image(); img74_9a60_4_h.src = "typo3temp/menu/5e235e12e1.gif";
}
// -->
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
<!--
// JS function for mouse-over
function over(name,imgObj) { //
if (version == "n3" && document[name]) {document[name].src = eval(name+"_h.src");}
else if (typeof(document.getElementById)=="function" && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_h.src");}
else if (imgObj) {imgObj.src = eval(name+"_h.src");}
}
// JS function for mouse-out
function out(name,imgObj) { //
if (version == "n3" && document[name]) {document[name].src = eval(name+"_n.src");}
else if (typeof(document.getElementById)=="function" && document.getElementById(name)) {document.getElementById(name).src = eval(name+"_n.src");}
else if (imgObj) {imgObj.src = eval(name+"_n.src");}
}
// -->
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function T3_onmousemoveWrapper(e) { GL_getMouse(e); GLbbfecf_getMouse(e); GLf11d9d_getMouse(e); }
function T3_onmouseupWrapper(e) { GL_mouseUp('bbfecf',e); GL_mouseUp('f11d9d',e); }
function T3_onloadWrapper() { GL_initLayers(); GL_restoreMenu("bbfecf"); GL_restoreMenu("f11d9d"); }
document.onmousemove=T3_onmousemoveWrapper;
document.onmouseup=T3_onmouseupWrapper;
document.onload=T3_onloadWrapper;
/*]]>*/
</script>
</head>
<body onload="T3_onloadWrapper();">
<div id="Menuf11d9d0" style="z-index:9999; position:absolute; width: 125 px; VISIBILITY:hidden; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 11px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; FONT-FAMILY: arial,helvetica; COLOR: #00528A; BACKGROUND-COLOR: #ceefff; layer-background-color: CEEFFF;"><table width="150" border="0" cellspacing="0" cellpadding="0" style="background: #ceefff; border-bottom: 1px solid #00528A;"><tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00528A; border-right: 1px solid #00528A; border-left: 1px solid #00528A;"><div id="anchorIDc717530751" style="position:absolute;visibility:hidden;"></div><div id="itemIDc717530751" style="width:100%; height:100%;"><strong><a href="index.php?id=72" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecfglbbfecf_overmenubbfecf0="" onmouseout="GL_resetAll(" bbfecf="">Test1</a></strong></div></td></tr><div id="anchorID2fb62402a4" style="position:absolute;visibility:hidden;"></div><div id="itemID2fb62402a4" style="width:100%; height:100%;"><a href="index.php?id=38" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecf="" onmouseout="GL_resetAll(">Test2</a></div><div id="anchorID8dfa0d7cda" style="position:absolute;visibility:hidden;"></div><div id="itemID8dfa0d7cda" style="width:100%; height:100%;"><a href="index.php?id=37" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecf="" onmouseout="GL_resetAll(">Test3</a></div><div id="anchorIDc951e8f203" style="position:absolute;visibility:hidden;"></div><div id="itemIDc951e8f203" style="width:100%; height:100%;"><a href="index.php?id=36" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecf="" onmouseout="GL_resetAll(">Test4</a></div><div id="anchorID88d0741097" style="position:absolute;visibility:hidden;"></div><div id="itemID88d0741097" style="width:100%; height:100%;"><a href="index.php?id=35" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecf="" onmouseout="GL_resetAll(">Test5</a></div><tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00528A; border-right: 1px solid #00528A; border-left: 1px solid #00528A;"><div id="anchorIDa6dd530ee3" style="position:absolute;visibility:hidden;"></div><div id="itemIDa6dd530ee3" style="width:100%; height:100%;"><strong><a href="index.php?id=33" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecfglbbfecf_overmenubbfecf5="" onmouseout="GL_resetAll(" bbfecf="">Test6</a></strong></div></td></tr><tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00528A; border-right: 1px solid #00528A; border-left: 1px solid #00528A;"><div id="anchorIDad59ea94e6" style="position:absolute;visibility:hidden;"></div><div id="itemIDad59ea94e6" style="width:100%; height:100%;"><strong><a href="index.php?id=32" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecfglbbfecf_overmenubbfecf6="" onmouseout="GL_resetAll(" bbfecf="">Test7</a></strong></div></td></tr><tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00528A; border-right: 1px solid #00528A; border-left: 1px solid #00528A;"><div id="anchorIDd846a1a710" style="position:absolute;visibility:hidden;"></div><div id="itemIDd846a1a710" style="width:100%; height:100%;"><strong><a href="index.php?id=31" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecfglbbfecf_overmenubbfecf7="" onmouseout="GL_resetAll(" bbfecf="">Test8</a></strong></div></td></tr><tr><td nowrap="nowrap" valign="top" style="background:#ceefff; border-top: 1px solid #00528A; border-right: 1px solid #00528A; border-left: 1px solid #00528A;"><div id="anchorID98a2e4fd9c" style="position:absolute;visibility:hidden;"></div><div id="itemID98a2e4fd9c" style="width:100%; height:100%;"><strong><a href="index.php?id=34" onfocus="blurLink(this);" onmouseover="GL_hideAll(" bbfecfglbbfecf_overmenubbfecf8="" onmouseout="GL_resetAll(" bbfecf="">Test9</a></strong></div></td></tr></table></div>
<!-- ### DOCUMEMT_BODY ### start -->
<div id="contentwrapper">
<div id="logo"><!--###logo### begin --><img src="fileadmin/templates/fr/main/images/logo.gif" alt="Logo" width="125" height="160" /><!--###logo### end --></div>
<div id="navigation"><a href="index.php?id=72" onmouseover="over('img72_70ae_0');" onmouseout="out('img72_70ae_0');"><img src="typo3temp/menu/844afdd66c.gif" width="105" height="43" border="0" alt="Test1" name="img72_70ae_0" /></a><a href="index.php?id=38" onmouseover="over('img38_70ae_1');" onmouseout="out('img38_70ae_1');"><img src="typo3temp/menu/490eafa33c.gif" width="97" height="43" border="0" alt="Test2" name="img38_70ae_1" /></a><a href="index.php?id=37" onmouseover="over('img37_70ae_2');" onmouseout="out('img37_70ae_2');"><img src="typo3temp/menu/eb52a63872.gif" width="97" height="43" border="0" alt="Test3" name="img37_70ae_2" /></a><a href="index.php?id=36" onmouseover="over('img36_70ae_3');" onmouseout="out('img36_70ae_3');"><img src="typo3temp/menu/4f0c514226.gif" width="97" height="43" border="0" alt="Test4" name="img36_70ae_3" /></a><a href="index.php?id=35" onmouseover="over('img35_70ae_4');" onmouseout="out('img35_70ae_4');"><img src="typo3temp/menu/df12889270.gif" width="97" height="43" border="0" alt="Test5" name="img35_70ae_4" /></a><a href="index.php?id=33" onmouseover="over('img33_70ae_5');" onmouseout="out('img33_70ae_5');"><img src="typo3temp/menu/e70c7de0dc.gif" width="97" height="43" border="0" alt="Test6" name="img33_70ae_5" /></a><a href="index.php?id=32" onmouseover="over('img32_70ae_6');" onmouseout="out('img32_70ae_6');"><img src="typo3temp/menu/5692d4ef6f.gif" width="97" height="43" border="0" alt="Test7" name="img32_70ae_6" /></a><a href="index.php?id=31" onmouseover="over('img31_70ae_7');" onmouseout="out('img31_70ae_7');"><img src="typo3temp/menu/01d95c401e.gif" width="97" height="43" border="0" alt="Test8" name="img31_70ae_7" /></a><a href="index.php?id=34" onmouseover="over('img34_70ae_8');" onmouseout="out('img34_70ae_8');"><img src="typo3temp/menu/3dbd52f483.gif" width="104" height="43" border="0" alt="Test9" name="img34_70ae_8" /></a><table width="350" height="25" border="0" cellspacing="1" cellpadding="0"><tr><td nowrap="nowrap" valign="top" style="background: #ceefff;"><div id="anchorID848b340e81" style="position:absolute;visibility:hidden;"></div><div id="itemID848b340e81" style="width:100%; height:100%;"><strong><a href="index.php?id=2" target="page" onfocus="blurLink(this);" onmouseover="GL_doTop('f11d9d', 'Menuf11d9d0');GLf11d9d_over('Menuf11d9d0');" onmouseout="GL_stopMove('f11d9d');GL_resetAll(" f11d9d="">Testarea</a></strong></div></td></tr></table></div>
<div id="contentarea"><!--###contentarea### begin -->
<div id="maincontent"><!--###maincontent### begin -->
<div id="picarea"></div>
<div id="breadcrumb"><strong>You are here:</strong> > <a href="index.php?id=2">Testpage</a> > <a href="index.php?id=38">Test2</a></div>
<div id="search"><!--###search### begin --><form action="" method="post"><input type="text" name="searchvalue" size="26" /><input class="image" type="image" height="18" src="fileadmin/templates/fr/main/images/go_off.gif" /></form><!--###search### end --></div>
<div id="onecolumn"></div>
<div id="cleft"></div>
<div id="cmiddle"></div>
<div id="cright"></div>
<!--###maincontent### end --></div>
<!--###contentarea### end --></div>
<div id="footer"><img src="fileadmin/templates/fr/main/images/footernav/copyright.gif" width="331" height="30" border="0" alt="" title="" /><a href="index.php?id=78" onmouseover="over('img78_9a60_0');" onmouseout="out('img78_9a60_0');"><img src="typo3temp/menu/d6df4d1da4.gif" width="75" height="30" border="0" alt="Contact" name="img78_9a60_0" /></a><a href="index.php?id=77" onmouseover="over('img77_9a60_1');" onmouseout="out('img77_9a60_1');"><img src="typo3temp/menu/30a9f7e310.gif" width="67" height="30" border="0" alt="Credits" name="img77_9a60_1" /></a><a href="index.php?id=76" onmouseover="over('img76_9a60_2');" onmouseout="out('img76_9a60_2');"><img src="typo3temp/menu/e72e626ee2.gif" width="184" height="30" border="0" alt="Partner" name="img76_9a60_2" /></a><a href="index.php?id=75" onmouseover="over('img75_9a60_3');" onmouseout="out('img75_9a60_3');"><img src="typo3temp/menu/a521595007.gif" width="86" height="30" border="0" alt="Search" name="img75_9a60_3" /></a><a href="index.php?id=74" onmouseover="over('img74_9a60_4');" onmouseout="out('img74_9a60_4');"><img src="typo3temp/menu/7a6b943cbf.gif" width="129" height="30" border="0" alt="English Version" name="img74_9a60_4" /></a></div>
</div><!-- ### DOCUMEMT_BODY ### end -->
</body>
</html>