[Typo3] expanding tmenu to 2 levels
Tyler Kraft
headhunterxiii at yahoo.ca
Mon Aug 1 18:07:01 CEST 2005
do you have a visual for the menu you want? mail to me OL so i can
compare to your CSS
Jane Larsen wrote:
> 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