[Typo3] expanding tmenu to 2 levels
Tyler Kraft
headhunterxiii at yahoo.ca
Fri Jul 29 17:27:01 CEST 2005
BTW lets continue this thread OT
Jane Larsen wrote:
> My template setup is easy... its Candidate (modified a little)... what
> I do is using:
>
> temp.sidenav... (your listing)
>
> for defining the menu and then i do this to replace the original menu:
>
> page.10.10 < temp.sidenav
>
> if using my gmenu definition I get a menu with drop down, but in this
> case all I get is this:
>
> <ul id="sidenav"></ul>
>
> (if I get the source correctly)
>
> //Jane
>
>
> On 7/29/05, Tyler Kraft <headhunterxiii at yahoo.ca> wrote:
>
>> >>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
>>>>
>>
>>_______________________________________________
>>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