[Typo3] expanding tmenu to 2 levels
Jane Larsen
noesgard at gmail.com
Mon Aug 1 17:32:13 CEST 2005
Hi again
been trying to get the horizontal menu going, bur no luck so far, I
just gets odd placed menu items, and not apllied too much on top level
(I'm probably messing up a little). Here is what I have:
TS menu setup:
sidenav = COA
sidenav.wrap = <div id="menu"> | </div>
sidenav {
10 = HMENU
10.entryLevel = 0
10.wrap = <ul id="menuitem">|</ul>
10.1 = TMENU
10.1.noBlur = 1
10.1.expAll = 1
10.1.NO {
wrapItemAndSub = <li>|</li>
}
10.2 = TMENU
10.2.wrap = <ul id="submenu">|</ul>
10.2.noBlur = 1
10.2.NO {
wrapItemAndSub = <li>|</li>
}
}
CSS:
#menu
{
background-color: #1F00CA;
border-top: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;
}
#menuitem ul
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
#menuitem ul li
{
display: inline;
margin-left: -4px;
}
#menuitem ul li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
#menuitem ul li a:hover
{
background-color: #16008D;
color: white;
}
#submenu
{
font-size: 9;
}
Any ideas?
//Jane
On 7/29/05, Jane Larsen <noesgard at gmail.com> wrote:
> Thx for helpin out :o)
>
> will check out the css reference
>
> //Jane
>
> On 7/29/05, Tyler Kraft <headhunterxiii at yahoo.ca> wrote:
> > The menu works, but needs the line 10.1.begin=4 removed or it will start
> > after the 4th menu item.
> >
> >
> > 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
> > >>
> > _______________________________________________
> > 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