Ich habe folgende Hauptnavigation mit den ypslideoutmenu CSS Code gespeichert:
#nav_main {}
#nav_main ul
{
padding-left: 0;
margin-left: 0;
background-color: #D0D4D4;
color: #fff ;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
margin: 2px 0 2px 0;
}
#nav_main ul li { display: inline;}
#nav_main ul li a
{
padding: 5px 39px;
background-color: #D0D4D4;
color: #000 ;
text-decoration: none;
float: left;
border-right: 2px solid #fff;
margin: 0 1px 0 0;
line-height: 25px
}
#nav_main ul li a:hover
{
background-color: #B2B6B6;
color: #000;
}
#nav_main #current a,#nav_main #current a:hover, #nav_main #current a span { background-color:#66A3CF; color: #fff;}
#yymenu a {
padding: 4px;
text-decoration: none;
display: block;
color: #FFFFFF;
margin: 0px;
border-bottom: solid 1px #FFffff;
background: #0066CC;
font-weight: bold;
font-size:0.920em;
}
#yymenu a.last {
border-style: none;
}
#yymenu {
background: #2e3e4b;
}
#yymenu a:hover {
color: #FFFFFF;
background-color: #790000;
}
.mmLevel1, .mmLevel2{
padding-top:0px;
margin-bottom:10px;
border: 2px solid #8594a0;
}
#yymenu .sub {
background-image: url(../../img/visited.gif);
background-repeat: no-repeat;
background-position: right center;
}
Dann habe ich ein ext-Template erstellt und dieses in das Root-Template eingefügt. TS des ext-Template ist wie folgt:
CONSTANTS:
ypmenue.level1.orientation = down
ypmenue.level2.width = 155
ypmenue.level2.height = 25
ypmenue.level2.orientation = down
#ypmenue.level2.orientation = right
ypmenue.level3.width = 155
ypmenue.level3.height = 25
ypmenue.level3.orientation = right
SETUP:
page.headerData.9 = TEXT
page.headerData.9.value = <script type="text/javascript" src="fileadmin/scripts/ypSlideOutMenus.js" ></script>
lib.nav_main = HMENU
lib.nav_main {
special = directory
special.value = 1
1 = TMENU
1.stdWrap.dataWrap = <ul> | </ul>
1 {
expAll = 1
NO {
linkWrap = <li> | </li>
stdWrap.wrap = <span> | </span>
}
IFSUB = 1
IFSUB {
doNotLinkIt = 1
linkWrap = <li> | </li>
stdWrap.cObject = COA
stdWrap.cObject {
10 = LOAD_REGISTER
10.mm_2_2 =
10.site_uid_l001.cObject = TEXT
10.site_uid_l001.cObject.field = uid
10.javascript.cObject = TEXT
10.javascript.cObject.dataWrap = {register:javascript}var menu{field:uid} = new ypSlideOutMenu("menu{field:uid}", "{$ypmenue.level2.orientation}", 0, 0, {$ypmenue.level2.width}, {$ypmenue.level2.height}, null);
20 = TEXT
20 {
field = title
typolink {
parameter.field = uid
wrap = <span> | </span>
ATagBeforeWrap = 1
ATagParams.cObject = COA
ATagParams.cObject {
10 = TEXT
10.dataWrap = onmouseover="repositionMenu(menu{field:uid}, 'act{field:uid}');ypSlideOutMenu.showMenu('menu{field:uid}')"
20 = TEXT
20.dataWrap = onmouseout="ypSlideOutMenu.hideMenu('menu{field:uid}');"
30 = TEXT
30.dataWrap = id="act{field:uid}"
}
}
}
}
}
}
2 = TMENU
2 {
expAll = 1
stdWrap.cObject = LOAD_REGISTER
stdWrap.cObject.string_layer.cObject = TEXT
stdWrap.cObject.string_layer.cObject.dataWrap = {register:string_layer}<div id="menu{register:site_uid_l001}Container" ><div id="menu{register:site_uid_l001}Content" class="mmContent" ><div class="mmLevel1">{register:mm_2_2}|</div></div></div>
NO {
doNotLinkIt = 1
stdWrap.cObject = COA
stdWrap.cObject {
20 = LOAD_REGISTER
20.mm_2_1.cObject = TEXT
20.mm_2_1.cObject {
field = title
wrap = <div> | </div>
typolink {
parameter.field = uid
wrap = <span> | </span>
ATagBeforeWrap = 1
ATagParams.cObject = COA
ATagParams.cObject {
30 = TEXT
30.dataWrap = id="act{field:uid}"
40 = |*| 0 |*| TEXT
40.value = class="last"
}
}
}
30 =LOAD_REGISTER
30.mm_2_2.cObject = TEXT
30.mm_2_2.cObject.dataWrap = {register:mm_2_2}{register:mm_2_1}
}
}
IFSUB < .NO
IFSUB = 1
IFSUB {
stdWrap.cObject {
10 = LOAD_REGISTER
10.mm_3_2 =
10.site_uid_l002.cObject = TEXT
10.site_uid_l002.cObject.field = uid
10.javascript.cObject = TEXT
10.javascript.cObject.dataWrap = {register:javascript}var menu{field:uid} = new ypSlideOutMenu("menu{field:uid}", "{$ypmenue.level3.orientation}", 0, 0, {$ypmenue.level3.width}, {$ypmenue.level3.height}, "menu{register:site_uid_l001}");
20.mm_2_1.cObject {
typolink {
ATagParams.cObject {
10 = TEXT
10.dataWrap = onmouseover="ypSlideOutMenu.showMenu(\'menu{field:uid}\',\'act{field:uid}\',menu{field:uid}, 2 );"
20 = TEXT
20.dataWrap = onmouseout="ypSlideOutMenu.hideMenu(\'menu{field:uid}\');"
40 = CASE
40 {
key = |*| 0 |*| 1
1 = TEXT
1.value = class="last sub"
default = TEXT
default.value = class="sub"
}
}
}
}
}
}
}
3 < .2
3.stdWrap.cObject.string_layer.cObject.dataWrap = {register:string_layer}<div id="menu{register:site_uid_l002}Container" ><div id="menu{register:site_uid_l002}Content" class="mmContent" ><div class="mmLevel2">{register:mm_3_2}|</div></div></div>
3 {
NO {
stdWrap.cObject {
20 = LOAD_REGISTER
20.mm_2_1 =
20.mm_3_1.cObject = TEXT
20.mm_3_1.cObject {
field = title
wrap = <div> | </div>
typolink {
parameter.field = uid
wrap = <span> | </span>
ATagBeforeWrap = 1
ATagParams.cObject = COA
ATagParams.cObject {
30 = TEXT
30.dataWrap = id="act{field:uid}"
40 = |*| 0 |*| TEXT
40.value = class="last"
}
}
}
30 = LOAD_REGISTER
30.mm_2_2 >
30.mm_3_2.cObject = TEXT
30.mm_3_2.cObject.dataWrap = {register:mm_3_2}{register:mm_3_1}
}
}
IFSUB = 0
}
}
page.200 = TEXT
page.200.dataWrap = <script type="text/javascript">/*<![CDATA[*/ ypSlideOutMenu.set_level_one("{$ypmenue.level1.orientation}");var strDiv = '<div id="yymenu">{register:string_layer}</div>';document.write(strDiv);{register:javascript}ypSlideOutMenu.writeCSS(); /*]]>*/</script>
Nun, auf der Webseite sehe ich aber kein Slideout des Menüs, bzw. der Unterpunkte der jeweiligen Hauptseiten.
Im Quelltext zur Seite wird aber das Javascript im Header angezeigt.
In Typoscript bin ich kein Experte und beschäftige mich nicht so sehr damit. Deswegen frage ich hier nach, ob mir jemand bei der Einstellung behilflich sein kann, damit ich das wunderschöne ypSlideOutmenu verwenden kann.