[TYPO3] Css drop down menu problem

Loek Hilgersom hilgersom at xs4all.nl
Wed Jun 13 15:52:36 CEST 2007


Sorry, my mistake (I got lost in all the comments and conditions) :-)
Loek

Oliver Rowlands wrote:
> Hi Loek,
> 
> Gideon's HTML code is correct and validates, this 'conditional comment' 
> technique is used to bypass IE's appalling handling of the :hover CSS 
> selector. Have a look at the main navigation on the following site for 
> an example:
> 
> http://www.spannerworks.com
> 
> As far as I can remember it works in IE5.5+, Firefox, Opera, Safari & 
> Konqueror without needing any JS.
> 
> Gideon, try the following TypoScript:
> 
> lib.mainmenu = HMENU
> lib.mainmenu {
>   entryLevel = 0
>   1 = TMENU
>   1 {
>     wrap = <ul> | </ul>
>     noBlur = 1
>     expAll = 1
>     NO {
>       ATagTitle.field = title
>       stdWrap.htmlSpecialChars = 1
>       ATagBeforeWrap = 1
>       linkWrap = | <!--[if IE 7]><!-->
>       afterWrap = | <!--<![endif]--><!--[if lte IE 
> 6]><table><tr><td><![endif]-->
>       wrapItemAndSub = <li> | <!--[if lte IE 
> 6]></td></tr></table></a><![endif]--></li>
>     }
>     ACT < .NO
>     ACT = 1
>     ACT {
>       wrapItemAndSub = <li class="active"> | </li>
>     }
>   }
>   2 < .1
> }
> 
> Hope this helps,
> 
> Oliver
> 
> Loek Hilgersom wrote:
>> Hi Gideon,
>>
>> To begin with, your desired code doesn't seem to be correct: the 
>> second a-tag
>> doesn't get closed for most browsers except IE7 (and for old IE's it 
>> gets closed
>> later on).
>> Maybe better correct that first, then I guess it's a matter of 
>> diligent work to
>> put all the bits and pieces in the right places in your typoscript. It 
>> looks
>> like you're pretty close to a solution.
>>
>> Loek
>>
>>
>> Gideon So wrote:
>>> Hi all,
>>>
>>>     I woould like to make a css drop down menu like the following:
>>>
>>> <ul><li><a href="#">Home</a></li> </ul>
>>>
>>> <ul> <li><a href="#">Drop-down 1<!--[if IE
>>> 7]><!--></a><!--<![endif]--><!--[if lte IE 
>>> 6]><table><tr><td><![endif]-->
>>> <ul> <li><a href="#">Sublink 11</a></li>
>>>      <li><a href="#">Sublink 12</a></li>
>>>      <li><a href="#">Sublink 13</a></li>
>>>      <li><a href="#">Sublink 14</a></li>
>>>      <li><a href="#">Sublink 15 with a lot of text so that entry
>>> hasseveral lines</a></li> </ul><!--[if lte IE
>>> 6]></td></tr></table></a><![endif]--> </li>
>>> </ul>
>>>
>>>     I have my typoscript like the following
>>>
>>> lib.mainmenu = HMENU
>>> lib.mainmenu {
>>>     wrap = |
>>>     entryLevel = 0
>>> 1 = TMENU
>>> 1 {
>>>   wrap = <ul> | </ul>
>>>   expAll = 1
>>>   NO.ATagTitle.field = subtitle//title
>>>   NO.wrapItemAndSub = <li> | </li>
>>>
>>> IFSUB = 1
>>> IFSUB {
>>>     ATagTitle.field = subtitle//title
>>>     wrapItemAndSub = <li> | </li>
>>>     allWrap = | <!--<![endif]-->
>>>     linkWrap = |<!--[if IE 7]><!-->
>>>     ATagBeforeWrap = 1
>>> }
>>> }
>>> 2 = TMENU
>>> 2 {
>>>     wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE
>>> 6]></a><![endif]-->
>>>     expAll = 1
>>>     NO.ATagTitle.field = subtitle//title
>>>     NO.wrapItemAndSub = <li> | </li>
>>>     IFSUB = 1
>>>     IFSUB {
>>>            wrapItemAndSub = <li> | </li>
>>>            allWrap = | <!--<![endif]-->
>>>            linkWrap = |<!--[if IE 7]><!-->
>>>            ATagBeforeWrap = 1
>>>            ATagParams = class="hide"
>>> }
>>> }
>>> }
>>> }
>>>
>>>     But I don't have the desire result menu. Can anybody help??
>>>
>>>     P.S the output:
>>>
>>> <ul><li><a href="index.php?id=3">home</a></li>
>>>
>>> <li><a href="index.php?id=4">Drop-down1 <!--[if IE
>>> 7]><!--></a><!--<![endif]--><table><tr><td>
>>> <ul><li><a href="index.php?id=15">Sublink 11<!--[if IE
>>> 7]><!--></a><!--<![endif]--></li>
>>>     <li><a href="index.php?id=22">Sublink 12</a></li>
>>>     <li><a href="index.php?id=16">Sublink 13</a></li>
>>>     <li><a href="index.php?id=17">Sublink 14</a></li>
>>>     <li><a href="index.php?id=23">Sublink
>>> 15</a></li></ul></td></tr></table><!--[if lte IE 
>>> 6]></a><![endif]--></li>
>>>
>>> Gideon
> 
> 


More information about the TYPO3-english mailing list