[TYPO3] Problem implementing nested menus in TypoScript

[Ricardo Pereira]

    Hi all,

    I'm trying to implement the menu below in Typo3 but I'm having 
trouble coming up with the right TypoScript for it.

    The main problems are that:

1) I need to create 2 divs for each menu item that has subitems, one of 
class "button" and the other "menu".
2) I don't know how to embed the nested levels when a menu has 
sub-menus. That is, how can I embed the next level of menus inside the 
2nd div (the "menu" one).
3) This one is probably easy: how do I replace the link text in two 
different places (using | ). For example, how do I fix the following TS 
that I invented and doesn't work:

NO.doNotLinkIt = 1 # disable linking so it just uses the menu name as text
NO.allWrap = <div><span><img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="|" />|</span></div>

    Any help is appreciated.

    Cheers,

Ricardo


    <!-- menu 
------------------------------------------------------------------------------>    

    <div id="menu">
            <!-- start AnimTree -->
            <div id="nav" class="AnimTree">

                <div id="about" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="About TDWG">
                        About TDWG
                    </span>
                </div>

                <div id="aboutMenu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                        <div class="menuNode"><a 
href="#">Constitution</a></div>
                        <div class="menuNode"><a href="#">Glossary</a></div>
                        <div class="menuNode"><a href="#">History</a></div>
                        <div class="menuNode"><a href="#">Archive</a></div>
                        <div class="menuNode"><a href="#">Site Map</a></div>
                        <div class="menuNode"><a href="#">About this 
website</a></div>
                        <div class="menuNode"><a href="#">Contact 
Us</a></div>
                </div>

                <div id="standards" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="Standards">
                        Standards
                    </span>
                </div>
                <div id="standardsMenu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                        <div class="menuNode"><a 
href="#">Constitution</a></div>
                </div>

                <div id="subgroups" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="Subgroups">
                        Subgroups
                    </span>
                </div>
                <div id="subgroupsMenu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div id="subgroup1" class="button">
                            <span class="buttonlabel" 
onclick="toggleMenu(this)" onmouseover="buttonOver(this)" 
onmouseout="buttonOff(this)">
                                <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="Subgroups">
                                subgroup 1
                            </span>
                        </div>
                        <div id="subgroup1Menu" class="menu">
                                <div class="menuNode"><a href="#">test 
for a really long title</a></div>
                                <div class="menuNode"><a href="#">fhshh 
hhhh </a></div>
                                <div id="subsubgroup1" class="button">
                                    <span class="buttonlabel" 
onclick="toggleMenu(this)" onmouseover="buttonOver(this)" 
onmouseout="buttonOff(this)">
                                        <img 
src="tdwg01/animTree/menuicon.gif" title="click to toggle menu" 
alt="Subgroups">
                                        subsubgroup 1
                                    </span>
                                </div>
                                <div id="subsubgroup1Menu" class="menu">
                                        <div class="menuNode"><a 
href="#">fhsdfgfg hhhh </a></div>
                                        <div class="menuNode"><a 
href="#">Execudddtive</a></div>
                                </div>
                                <div class="menuNode"><a 
href="#">Executive</a></div>
                        </div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                </div>

                <div id="meeting" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="*">
                        2006 Meeting
                    </span>
                </div>
                <div id="meetingMenu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                </div>

                <div id="page234" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="*">
                        2007 Meeting
                    </span>
                </div>
                <div id="page234Menu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                </div>

                <div id="account" class="button">
                    <span class="buttonlabel" onclick="toggleMenu(this)" 
onmouseover="buttonOver(this)" onmouseout="buttonOff(this)">
                        <img src="tdwg01/animTree/menuicon.gif" 
title="click to toggle menu" alt="*">
                        My Account
                    </span>
                </div>
                <div id="accountMenu" class="menu">
                        <div class="menuNode"><a href="#">FAQ</a></div>
                        <div class="menuNode"><a 
href="#">Secretariat</a></div>
                        <div class="menuNode"><a 
href="#">Executive</a></div>
                </div>
               
            </div>
            <!-- end AnimTree -->
    </div>