[Typo3] expanding tmenu to 2 levels

Fri Jul 29 16:51:46 CEST 2005

I did put the sidenav in my template and it shows up blank. I know the
insertion works since I can replace it with my gmenu without
problems...

It seems like your menu is vertical? I can find a solution for that
(fine examples in ts by example) but its not what I would like here...

//Jane

On 7/29/05, Tyler Kraft <headhunterxiii at yahoo.ca> wrote:
> 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
> _______________________________________________
> Typo3-english mailing list
> Typo3-english at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-english
>