[TYPO3-content-rendering] Graphical TMENU - loose ends tied up!

Thu Jan 12 01:44:00 CET 2006

Hi Folks,

after a busy day Stefan and I are glad to present the brandnew GTMENU... 
Work's finished on the IProcFunc with which you can now have both: 
"graphical cookies AND accessibility chocolate" ;)

I'm going to put this into the WiKi as soon as I can, for now you'll 
find it here 
http://www.stdwarp.org/fileadmin/templates/scripts/gtmenu_iproc_func.inc
and a working example here: http://www.stdwarp.org/?83

Just a few notes:

The IProcFunc renders a GMENU as a TMENU and uses CSS for 
background-images either JS or <img>'s for preloading (configurable).
First of all you need a normal GMENU (like we have in the wiki). Then 
include the script with

page.includeLibs.gtmenu = fileadmin/your/paths/gtmenu_iproc_func.inc

and in your menu with
my_GMENU.IProcFunc = user_gtmenu->GTMenu

There are 2 new TypoScript Options for a GTMENU:

1) css2TempFile -> if this is set to 1, the menustyles are written to an 
external stylesheet

2) imgPreload -> you can set this to 'js', 'external' or 'img'.
- 'js' = renders JS for preloading images into the page header
- 'external' = renders JS for preloading images into an external file
- 'img' = renders hidden <img>'s that correspond to the 
background-images just after the <body> tag

The default setting is imgPreload (not set) / css2TempFile (not set) 
which results in just the CSS written to the pageHeader and nothing else.

Especially with :hover enabled (RO state), there are settings where you 
might notice "flickers". It's always good to preload images if you have 
RO enabled. On the other hand, if you're just using ACT, IFSUB or CUR 
states, you might not need this.

I've done some basic benchmarks that might help you finding the setting 
of your choice (though some of them gave "flickers" to me but worked 
well for Stefan... you might have to test it yourself)

1. no imgPreload / no css2TempFile
<!-- Parsetime: 722 ms-->
- big flicker on :hover

2. imgPreload=img / no css2TempFile
<!-- Parsetime: 771 ms-->
- no flicker on :hover!

3. imgPreload=js / no css2TempFile
<!-- Parsetime: 766 ms-->
- flicker on :hover

4. imgPreload=external / no css2TempFile
<!-- Parsetime: 539 ms-->
- no flicker on :hover!!

5. imgPreload=external / css2TempFile=1
<!-- Parsetime: 742 ms-->
- no flicker on :hover!

6. imgPreload=js / css2TempFile=1
<!-- Parsetime: 756 ms-->
- flicker on :hover

7. imgPreload=img / css2TempFile=1
<!-- Parsetime: 765 ms-->
- no flicker on :hover

Of course parsetime is a rather relative value. But according to this 
setting, 4. seems to be the quickest and 5. the cleanest/best choice in 
our opinion.

Right, this becomes a quite longish posting ;) Please check this 
function out for weak points, better ways, etc.

So long and thanks for all the "flickers", yours
Stefan & Torsten