[Typo3] bars between menu items

[Christopher]

Hi,

On 6/23/05, Dr. Patrick van der Smagt <smagt at dlr.de> wrote:
> I'm trying to setup the following menus:
> 
>  1. Item
>  -------
>  2. Item  (this one is active)
>  2.1 Item
>  2.2 Item
>  --------
>  3. Item
>  --------
>  4. Item
>  --------
> 
> Using foldout menus, horizontal bars should be following level-1 menu items,
> except when these are activated (as "2. Item" in the above example).  In
> that case, the bar should be following the last level-2 menu item.
> 

Styles like this are one of the places that using nested lists for
markup comes in very handy. In a navigation menu  made of lists, the
second level menus are _contained_ in one of the top level's list
items (<li>). This means that you can simply style the top level's
<li> elements to have a bottom border or some similar thing:

TS
==========
lib.navigation = HMENU
lib.navigation.1 = TMENU
lib.navigation.1 {
  wrap = <ul id="navigation">|</ul>

  NO.wrapItemAndSub = <li>|</li>
}

lib.navigation.2 = TMENU
lib.navigation.2 {
  wrap = <ul>|</ul>

  NO.wrapItemAndSub - <li>|</li>
}

HTML
==========
<ul id="navigation">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a>
    <ul>
     <li><a href="#">Consectetuer</a></li>
     <li><a href="#">Adispiscing</a></li>
    </ul>
  </li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
</ul>

CSS
==========
ul#navigation li {
  border-bottom:2px solid red;
}

ul#navigation ul li {
  border-bottom-style:none;
}

...if I've typed this out right (sorry, can't take time to test it
just now; let me know if it doesn't work and I will correct it...),
ALL your list items should have a 2px wide bottom border _except_
'consectetuer'. Obviously I've left out most of the bells and
whistles; if you need more info about styling list-based menus with
css, just google 'listamatic'.


-Christopher