Pobiers doch mal mit dem DHTML fold out menu (GMENU_FOLDOUT) von Kasper himself. Das macht genau, was du willst, ausklappen, einklappen.
GMENU_FOLDOUT Typoscript:
## GMENU_FOLDOUT
includeLibs.gmenu_foldout = media/scripts/gmenu_foldout.php
temp.foldoutMenu = HMENU
temp.foldoutMenu.1 = GMENU_FOLDOUT
temp.foldoutMenu.1.expAll=1
temp.foldoutMenu.1.NO {
imgParams = align=top
wrap =
XY = 150,20
backColor = silver
10 = TEXT
10.text.field = nav_title // title
10.fontSize = 12
10.fontColor = Blue
10.offset = 2,10
}
temp.foldoutMenu.1.RO < temp.foldoutMenu.1.NO
temp.foldoutMenu.1.RO = 1
temp.foldoutMenu.1.RO {
10.fontColor = red
}
temp.foldoutMenu.2 = TMENU
temp.foldoutMenu.2.NO {
linkWrap = <nobr><font face=verdana size=1 color=black><B>|</B></font></nobr><BR>
stdWrap.case = upper
}
temp.foldoutMenu.1 {
dontLinkIfSubmenu = 1
displayActiveOnLoad = 1
stayFolded=1
foldSpeed = 6
subMenuOffset = 10,18
menuOffset = 20,100
menuBackColor = silver
bottomBackColor = silver
menuWidth = 170
arrowNO = media/bullets/arrow_no.gif
arrowACT = media/bullets/arrow_act.gif
arrowImgParams = hspace=4 align=top
bottomContent = TEXT
bottomContent.value = Hello World! Here is some content!
}
# Setting up page:
page = PAGE
page.typeNum = 0
page.5 = TEXT
page.5.field = title
page.5.wrap = <h3>|</h3>
page.7 = TEXT
page.7.field = abstract
page.7.wrap = <i>|</i><HR>
page.10 < temp.foldoutMenu
Dieses PHP Skript ablegen in media/scripts
(GMENU_FOLDOUT extension class)
<?php
/***************************************************************
* Copyright notice
* ...
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
*
* @author Kasper Skårhøj <kasper@typo3.com>
*/
class tslib_gmenu_foldout extends tslib_gmenu {
var $GMENU_fixKey="foldout";
var $WMarrowNO;
var $WMarrowACT;
var $WMimagesFlag;
var $WMimageHTML;
var $WMsubmenu;
var $WMtableWrap;
var $WM_activeOnLoad="";
function extProc_init() {
$this->WMarrowNO="";
$this->WMarrowACT="";
$this->WMimagesFlag=0;
$this->WMimageHTML ="";
if (($this->mconf["arrowNO"]||$this->mconf["arrowNO."]) && ($this->mconf["arrowACT"]||$this->mconf["arrowACT."])) {
$this->WMarrowNO = $GLOBALS["TSFE"]->cObj->getImgResource($this->mconf["arrowNO"],$this->mconf["arrowNO."]);
$this->WMarrowACT = $GLOBALS["TSFE"]->cObj->getImgResource($this->mconf["arrowACT"],$this->mconf["arrowACT."]);
if (is_array($this->WMarrowACT) && is_array($this->WMarrowNO)) {
$this->WMimagesFlag=1;
}
}
}
function extProc_beforeLinking($key) {
$this->I["addATagParams"]="";
$this->WMsubmenu = $this->subMenu($this->I["uid"],$this->I["mount_pid"]);
if (trim($this->WMsubmenu)) {
$this->I["addATagParams"]=' onClick="GF_menu('.$key.');'.($this->mconf["dontLinkIfSubmenu"] ? " return false;" : "").'"';
if ($this->isActive($this->I["uid"]) && $this->mconf["displayActiveOnLoad"]) { // orig: && $this->WMisSub, changed 210901
$this->WM_activeOnLoad='GF_menu('.$key.');';
}
}
}
function extProc_afterLinking($key) {
$this->WMtableWrap = $this->mconf["dontWrapInTable"] ? '' : '<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TR><TD>|</TD></TR></TABLE>';
if ($this->WMimagesFlag) {
$this->WMimageHTML='<img src="'.$GLOBALS["TSFE"]->absRefPrefix.$this->WMarrowNO[3].'" width="'.$this->WMarrowNO[0].'" height="'.$this->WMarrowNO[1].'" border="0" name="imgA'.$key.'"'.($this->mconf["arrowImgParams"]?' '.$this->mconf["arrowImgParams"]:'').'>';
} else {$this->WMimageHTML="";}
if (strstr($this->I["theItem"], "###ARROW_IMAGE###")) {
$this->I["theItem"] = str_replace("###ARROW_IMAGE###", $this->WMimageHTML, $this->I["theItem"]);
} else {
$this->I["theItem"] = $this->WMimageHTML.$this->I["theItem"];
}
$this->WMresult.= '
<DIV class=clTop id=divTop'.($key+1).'>'.$this->tmpl->wrap($this->I["theItem"], $this->WMtableWrap).'
<DIV class=clSub id=divSub'.($key+1).'>
'.$this->WMsubmenu.'
</DIV>
</DIV>'; // Originally a <BR> between the div-tags, but it seemed to break stuff.
}
function extProc_finish() {
$bHeight = t3lib_div::intInRange(($this->mconf["bottomHeight"]?$this->mconf["bottomHeight"]:100) ,0,3000);
$bottomContent = $this->mconf["bottomContent"] ? $GLOBALS["TSFE"]->cObj->cObjGetSingle($this->mconf["bottomContent"],$this->mconf["bottomContent."], "/GMENU_FOLDOUT/.bottomContent") : "";
$adjustTopHeights = intval($this->mconf["adjustItemsH"]);
$adjustSubHeights = intval($this->mconf["adjustSubItemsH"]);
$mWidth = t3lib_div::intInRange(($this->mconf["menuWidth"]?$this->mconf["menuWidth"]:170) ,0,3000);
$mHeight = t3lib_div::intInRange(($this->mconf["menuHeight"]?$this->mconf["menuHeight"]:400) ,0,3000);
$insertmColor= $this->mconf["menuBackColor"] ? 'BACKGROUND-COLOR: '.$this->mconf["menuBackColor"].'; layer-background-color: '.$this->mconf["menuBackColor"] : '';
$insertBottomColor= $this->mconf["bottomBackColor"] ? 'BACKGROUND-COLOR: '.$this->mconf["bottomBackColor"].'; layer-background-color: '.$this->mconf["bottomBackColor"] : '';
$menuOffset = t3lib_div::intExplode(",",$this->mconf["menuOffset"].",");
$subOffset = t3lib_div::intExplode(",",$this->mconf["subMenuOffset"].",");
$GLOBALS["TSFE"]->additionalHeaderData["gmenu_layer_shared"]='<script type="text/javascript" src="'.$GLOBALS["TSFE"]->absRefPrefix.'media/scripts/jsfunc.layermenu.js" language="JavaScript"></script>';
$GLOBALS["TSFE"]->additionalHeaderData["gmenu_foldout"]='<script type="text/javascript" src="'.$GLOBALS["TSFE"]->absRefPrefix.'media/scripts/jsfunc.foldout.js" language="JavaScript"></script>';
$GLOBALS["TSFE"]->additionalHeaderData[].= "
<STYLE type=text/css>
#divCont {
Z-INDEX: 1; LEFT: ".$menuOffset[0]."px; VISIBILITY: hidden; WIDTH: ".$mWidth."px; POSITION: absolute; TOP: ".$menuOffset[1]."px; HEIGHT: ".$mHeight."px
}
.clTop {
Z-INDEX: 1; WIDTH: ".$mWidth."px; POSITION: absolute; ".$insertmColor."
}
.clSub {
Z-INDEX: 1; LEFT: ".$subOffset[0]."px; WIDTH: ".$mWidth."px; POSITION: absolute; TOP: ".$subOffset[1]."px
}
.bottomLayer {
Z-INDEX: 1; WIDTH: ".$mWidth."px; CLIP: rect(0px ".$mWidth."px ".$bHeight."px 0px); POSITION: absolute; HEIGHT: ".$bHeight."px; ".$insertBottomColor."
}
</STYLE>
<SCRIPT language=JavaScript type=text/javascript>
<!--
GFV_foldNumber=".$this->WMmenuItems." //How many toplinks do you have?
GFV_foldTimer=".t3lib_div::intInRange(($this->mconf["foldTimer"]?$this->mconf["foldTimer"]:40) ,1,3000)."; //The timeout in the animation, these are milliseconds.
GFV_foldSpeed=".t3lib_div::intInRange($this->mconf["foldSpeed"],1,100)."; //How many steps in an animation?
GFV_stayFolded=".($this->mconf["stayFolded"] ? 'true' : 'false')."; //Stay open when you click a new toplink?
GFV_foldImg=".$this->WMimagesFlag."; //Do you want images (if not set to 0 and remove the images from the body)?
GFV_currentFold=null,
GFV_foldStep1=null,
GFV_foldStep2=null,
GFV_step=0,
GFV_active=false //Don't change this one.
GFV_adjustTopHeights = ".$adjustTopHeights.";
GFV_adjustSubHeights = ".$adjustSubHeights.";
if (bw.opera) {
GFV_scrX= innerWidth;
GFV_scrY= innerHeight;
}
//This is the default image.
//Remember to change the actual images in the page as well, but remember to keep the name of the image.
var GFV_unImg=new Image();
GFV_unImg.src='".$GLOBALS["TSFE"]->absRefPrefix.$this->WMarrowNO[3]."';
var GFV_exImg=new Image(); //Making an image variable...
GFV_exImg.src='".$GLOBALS["TSFE"]->absRefPrefix.$this->WMarrowACT[3]."'; //...this is the source of the image that it changes to when the menu expands.
//-->
</SCRIPT>
";
$GLOBALS["TSFE"]->JSeventFuncCalls["onmousemove"]["GF_resizeForOpera()"]= 'GF_resizeForOpera();';
$GLOBALS["TSFE"]->JSeventFuncCalls["onload"]["GMENU_FOLDOUT"]= 'if(bw.bw) {GF_initFoldout();'.$this->WM_activeOnLoad.'}';
$GLOBALS["TSFE"]->divSection.= '
<DIV id=divCont><!-- These are the contents of the foldoutmenu. -->
'.$this->tmpl->wrap($this->WMresult,$this->mconf["wrap"]).'
<DIV class=bottomLayer id=divTop'.($this->WMmenuItems+1).'>
<DIV class=clSub id=divSub'.($this->WMmenuItems+1).'><!-- This is a cover layer, it should always be the last one, and does NOT count in your number of toplinks! --><!-- So if this one is divTop7, the GFV_foldNumber variable should be set to 6 --><!-- This layer covers up the last sub, so if the last sub gets too big, increase this layers size in the stylesheet. --><!-- There are tables with width="100%" around the toplinks, to force NS4 to use the real width specified for the toplinks in the stylesheet. -->
</DIV>'.$this->tmpl->wrap($bottomContent, $this->WMtableWrap).'
</DIV>
</DIV><!-- Here ends the foldoutmenu. -->
';
return "";
}
}
$GLOBALS["TSFE"]->tmpl->menuclasses.=",gmenu_foldout";
if (defined("TYPO3_MODE") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["media/scripts/gmenu_foldout.php"]) {
include_once($TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["media/scripts/gmenu_foldout.php"]);
}
?>
Musst natürlich evtl. noch die Grafikpfade checken etc.
Viel Spass dabei.