[Typo3] expanding tmenu to 2 levels

Fri Jul 29 16:23:21 CEST 2005

Jane Larsen wrote:
> I think I'll have to work some more on this, the provided example
> doesn't show at all...

Ok how about this:

These menus are based from the famous drop downs on ALA.  Your menu 
probably doesn't show (using my typoscript) as it isn't built for your 
template and you dont have the appropriate css styling for it to work. 
But if everything is working correctly with your template it should be 
outputing something similar to the markup i give as an example at the end.

 From the template typoscript I sent you:

sidenav = COA
sidenav {
         10 = HMENU
         10.entryLevel = 0
         10.wrap = <ul id="sidenav">|</ul>   # wrap whole menu
         10.1 = TMENU
         10.1.begin=4
         10.1.noBlur = 1
         10.1.expAll = 1
         10.1.NO {
                 wrapItemAndSub = <li>|</li>  # wrap 1st level items
         }

         10.2 = TMENU
         10.2.wrap = <ul>|</ul>      # wrap second menu
         10.2.noBlur = 1
         10.2.NO {
                 wrapItemAndSub = <li>|</li>  # wrap second level menu items
         }
}

I take the sidenav COA and then replace it into the appropriate place in 
my html template using

temp.leftcolumn < sidenav

(I do it this way so I can easily add things to be placed into the 
lefthand column if I want later.)

temp.mainTemplate = TEMPLATE
temp.mainTemplate {
     template = FILE
     template.file = fileadmin/routemaster/rmindex.htm

     #select only the content between the <body> tages
     workOnSubpart = DOCUMENT_BODY

     #subs the ###leftcolumn###
     subparts.leftcolumn < temp.leftcolumn

     #subs the ###normalcolumn###
     subparts.normalcolumn < temp.normalcolumn
}

In my html template I obviously have the marker for a area called 
leftcolumn.

Then after that I place the temp.mainTemplate into the page typo3 outputs.

page.10 < temp.mainTemplate

Then the css here produces a flyout from the side menu instead a drop 
down, but it could be easily adapted.

/*	####--- left hand fold out menu ---###    */
#sidenav {float:left;left:0;}
#sidenav, #sidenav li, #sidenav li ul {padding:0;margin:0;border:0;}
#sidenav, #sidenav li ul { /* all lists */
	list-style: none;
	line-height: 1;
	background:#000;
	width:147px;
	display:block;
}
#sidenav li, #sidenav li ul li { /* all list items */
	display: block;	
	width: 147px; /* width needed or else Opera goes nuts */
	background:#c00;
	color:#fff;
}
#sidenav li{position:relative;}
#sidenav li a, #sidenav li ul li a {
	display: block;	
	background:#c00;
	color:#fff;
	padding: 8px 14px 8px 14px;
	text-decoration:none;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	width:119px;
}
* html #sidenav li ul li a{
	width:147px;
	w\idth:147px;
}
* html #sidenav li a{
	width:147px;
	w\idth:147px;
}
#sidenav li:hover, #sidenav li ul li:hover, #sidenav li a:hover, 
#sidenav li ul li a:hover  {background:#000;}
#sidenav li ul { /* second-level lists */
	position: absolute;
	top:0;
	left: -999em; /* using left instead of display to hide menus because 
display: none isn't read by screen readers */
}
#sidenav li:hover ul, #sidenav li.over ul{left:147px;}

/* Holly Hack. IE Requirement \*/
* html ul#sidenav li {float:left;}
* html ul#sidenav li a {height: 1%;}
/* End */

#sidenav li:hover a, #sidenav li:hover, #sidenav li.over, #sidenav 
li.over a{background:#000;}
#sidenav li:hover ul li a, #sidenav li.over ul li a {background:#d00;}
#sidenav li:hover ul li a:hover, #sidenav li.over ul li a:hover 
{background:#000;}

This all should then output something similar to:

<ul id="sidenav">
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a>
                 <ul>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 <li><a href="#">...</a></li>
                 </ul>
                 </li>
         <li><a href="#">...</a>
                 <ul>
                 <li><a href="#">...</a></li>
                 </ul>
                 </li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a>
                 <ul>
                 <li><a href="#">...</a></li>
                 </ul>
                 </li>
</ul>

if this doesn't work then go back and start testing to make sure things 
are actually going into your template as a first step.

hth
Tyler