[Typo3] expanding tmenu to 2 levels
Jane Larsen
noesgard at gmail.com
Fri Jul 29 17:17:27 CEST 2005
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