[Typo3] expanding tmenu to 2 levels
Tyler Kraft
headhunterxiii at yahoo.ca
Fri Jul 29 17:00:47 CEST 2005
>>Then the css here produces a flyout from the side menu instead a drop
>>down, but it could be easily adapted.
Sorry i didnt specify it was a vertical menu. Hence i said the css could
be easily adapted!
what about the other steps I listed. if memory serves me correctly you
must have the temp.leftcolumn<sidenav or it won't work. if you want to
avoid this step then changing sidenav to temp.sidenav should do the trick.
if it still doesnt work maybe post your template setup.
Jane Larsen wrote:
> 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
>>
More information about the TYPO3-english
mailing list