[TYPO3] Transmenu in typo3?

bernd wilke xoonsji02 at sneakemail.com
Mon Jun 30 15:07:34 CEST 2008


on Mon, 30 Jun 2008 14:17:51 +0200, Matyi Gábor wrote:

> bernd wilke <xoonsji02 at sneakemail.com> írta:
>> 
>> primary it is no TYPO3.
>> 
>> if you just depend on flyout on mouseover and transparency
> you can get it
>> without javascript (as long as you didn't care about IE6) and the best:
>> you can have a clean menu with cascaded
> UL/LI-tags
>> 
>> just look at my page:
> http://www.pi-phi.de/t3v4/cheatsheet.html
> 
> 
> I took a look into your page source. I see this.
> 
> var JSmenu = new JSmenu(1,'JSmenuForm');
>  var eid1=0;
> eid1=JSmenu.add(0,0,0,'Spickzettel','cheatsheet.html','_top');
> JSmenu.openID = eid1;
> eid1=JSmenu.add(0,eid1,0,'Bilder','bilder.html','_top');
> eid1=JSmenu.add(0,eid1,0,'Start','start.html','_top');
> eid1=JSmenu.add(0,eid1,0,'Login','login.html','_top');
> 
> How you generated this javascript menu? This is not TMENU, where I put
> ul and li, that I format with css.

this doesn't belong to the menu at the top with the flyout!!!
On my site I have played around with many different menus.
this javascript belongs to the drop-down-menu at the bottom, where a 
breadcrumb-like menu with dropdowns for each level appears.

also there is a left menu with counters 
and a menu to jump to neighbor-pages 
 
> 
>> 
>> you just missed the slow roll-out which you can get only
> with javascript.
> 
> Thanks, I didn't know, that this is the difference between the css and
> javascript based roll-out menu.

the flyout at all can also be done with javascript.
I just want to say: you don't need javascript as CSS can switch 
visibility using ':hover'.
as it reads in the CSS http://www.pi-phi.de/t3v4/fileadmin/css/fmenu.css 
at the end:
/* The magic - set to work for up to a 3 level menu, but can be increased 
unlimited */
#nav ul, 
#nav li:hover ul, 
#nav li:hover ul ul, 
[...]
{ display: none; }
#nav li:hover ul, 
#nav ul li:hover ul, 
[...]
{ display: block; }

 
>> The rest can be done with CSS using :hover As IE6 doesn't do :hover for
>> any other tags than A you
> need javascript.
>> 
>> 
>> and the transparency: just use semitransparent PNG (and
> fix it with:
>> http://www.pi-phi.de/t3v4/55.html#c66 for IE6, which also
> means: you need
>> javascript for IE6.)
> 
> I don't like this pngbehaviour. If you use png8 instead of png24, you
> can get transparent images. Or you can use gif.

alpha transparency means two colors are blended and is done with PNG. 
either png8 or png24. 
http://en.wikipedia.org/wiki/Alpha_compositing

with GIF you only can have full transparency for single pixels (or none).
if you want to have a menu where the background is seen through with GIF 
you must use a dither-pattern (http://en.wikipedia.org/wiki/
Dither#Digital_photography_and_image_processing) which will lead to moire-
patterns (http://en.wikipedia.org/wiki/Moire) (as you can see on some 
windows-version when you shutdown.)

better is alpha-transparency with PNG. any version you like.
but IE6 doesn't handle alpha-transparency correctly by default. Therefore 
the pngbehavior.htc. It's only for IE6. And then thissolution is the 
least work. (compare other solutions on that page described)
 
bernd
-- 
http://www.pi-phi.de/t3v4/cheatsheet.html


More information about the TYPO3-english mailing list