[TYPO3] Horizontal Multi-level Dropdown Menu

[Christopher]

Hi,

On 4/24/06, Tapio Markula <tapio.markula at dnainternet.net> wrote:
> Luc Franken wrote:
>
>  > Just create an UL LI list and then style it with CSS. Maybe you can
> use some external JS file to create the functionality.
>
>
> I have always used the default TMENU_LAYERS - it is quite cross-browser
> - IMO better than UL LI -based menus

Far, FAR worse actually--

TMENU_LAYERS on a site I operate:

-- needs about 311 lines of javascript per page, regardless of browser
-- will not work in ANY browser with javascript disabled
-- adds 4k+ of _very_ ugly code
-- is quite complex to set up and configure in TS

A simple <ul> menu that behaves identically on a dev version of the same site:

-- uses 12 lines of javascript for the ENTIRE site ONLY IF the browser
is Internet Explorer, and NO javascript otherwise
-- works in at many browsers without javascript (Mozilla family,
Safari, Opera...)
-- uses 1.4k of very simple html
-- can be COMPLETELY set up with the following TS:

lib.mainNavigation = HMENU
lib.mainNavigation {
  wrap = <ul id="mainNavigation">|</ul>

  1 = TMENU
  1 {
    noBlur = 1
    expAll = 1

    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
    }
  }

  2 < .1
  2.wrap = <ul>|</ul>
  3 < .2
  4 < .2
}	

The numbers and code sizes above are also for the menus on quite a
small site. The advantages of list-based menus over *MENU_LAYERS menus
become more and more obvious the more items the navigation menus
contain.

A list-based menu _may_ (or may not) require more in the way of CSS
coding, but the second-generation 'Suckerfish' [1] menus are quite
simple to style and will work 'out of the box' with browsers > version
5. Even for the IE Windows 5.x series all you have to do is provide an
additional stylesheet with box-model fixes--and for the site I
referred to above, there is ONE extra line of css to make the menus
work with IE 5.01 / IE 5.5.


-Christopher

[1] http://www.htmldog.com/articles/suckerfish/dropdowns/