[TYPO3] Typo3 and suckerfish dropdown menu

[Tyler Kraft]

have you done a seacrh on how to implement this? my guess is not, as its 
  very common menu....

as said so many times in the past (mainly by christopher) have you 
gotten the html and css to work correctly?

after that once you know the the html and css is correct then try to 
impliment it via ts!  this should be very easy to do as its nothing but 
unordered lists!

also M cohen has very good tutorials on how to do this....



Brian Bendtsen wrote:
> HI
> 
> I want to use the suckerfish dropdown menu on my Typy3 site, Im having 
> problems with my first level since its not (as it should be) vertical.
> 
> I have a feeling the problem is with the Typoscript.
> 
> The suckerfish dropdown menu is made of lists:
> 
> <ul id="nav">
>   <li><a href="">Sunfishes</a>
>     <ul id="level1">
>       <li id="sel"><a href="">Blackbanded sunfish</a></li>
>       <li><a href="">Shadow bass</a></li>
>       <li><a href="">Ozark bass</a></li>
>       <li><a href="">White crappie</a></li>
>         </ul>
>     </li>
> 
>   <li><a href="">Grunts</a>
>     <ul id="level1">
>       <li><a href="">Smallmouth grunt
>         </a></li>
>       <li><a href="">Burrito</a></li>
>       <li><a href="">Pigfish</a></li>
>     </ul>
>   </li>
> 
>   <li><a href="">Remoras</a>
>     <ul id="level1">
>       <li><a href="">Whalesucker</a></li>
>       <li><a href="">Marlinsucker</a></li>
>       <li><a href="">Ceylonese remora</a></li>
>       <li><a href="">Spearfish remora</a></li>
>       <li><a href="">Slender suckerfish</a></li>
>     </ul>
>   </li>
> </ul>
> 
> My TS setup so far:
> 
> # Menu 1 cObject
> lib.menu_1 = HMENU
> lib.menu_1.1 = TMENU
> lib.menu_1.1 {
>   expAll = 1
>   NO.ATagTitle.field = title
>   wrap = <UL id="nav"> | </UL>
>   NO.wrapItemAndSub = <li>|</li>
>   ACT = 1
>   ACT.wrapItemAndSub = <li id="sel">|</li>
>   ACT.ATagTitle.field = title
>   }
>  lib.menu_1.2 = TMENU
>  lib.menu_1.2 {
>  expAll = 1
>  NO.ATagTitle.field = title
>  wrap = <UL id=level1> | </UL>
>  NO.wrapItemAndSub = </LI> | </LI>
>  ACT = 1
>  ACT.wrapItemAndSub = <LI id=sel> | </LI>
>  ACT.ATagTitle.field = title
>  }
> }
> 
> my CSS:
> 
> #nav         { padding: 0; margin: 0; list-style: none; font-family: 
> Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
> #nav ul        { padding: 0; margin: 0; list-style: none;}
> #nav li     { float: left; position: relative; width: 10em;}
> 
> /* LINKS */
> 
> #nav a         {text-decoration: none;color: #555;}
> #nav a:hover    {color: #e3e3e3;}
> 
> /* LEVEL ONE */
> 
> #level1         {background-color: #e3e3e3;}
> #level1 a         {text-decoration: none;color: #555;}
> #level1 a:hover {color: #000;}
> li ul             { display: none;  position: absolute;   top: 1em;  
> left: 0;  }
> li > ul         { top: auto;    left: auto;    }
> li:hover ul, li.over ul{ display: block; }
> 
> /Brian Bendtsen