Hi Roman,
Re: my menu (http://www.tjkdesign.com/articles/dropdown/demo.asp) AFAIK, it is possible to use “Ctrl+” three times in FireFox without breaking the layout; this corresponds to more than the “largest” text-size in MSIE.
In any case, I believe it is much better than what the “Hybrid CSS Dropdowns” menu allows ;-)
The problem with CSS menus is that navigation is very important and problems with like the flashing effect, cross-browser issues, etc. make it less than ideal.
Another problem I have with CSS only menus is that it tries to do behaviour in CSS for which CSS was not designed. CSS should IMO be presentation only.
Also with XHTML markup, CSS styled but Javascript powered navigation you can do some eye candy like the menus I did for my MXRCMS product. see http://mxdemo.infireal.com/ (P.S: the markup is terrible, its on the todo list)
The menu does a roll-up and fade out effect.
Copy & paste the code below to embed this comment.
jc
I’m having a problem implementing a list in FireFox. When I added the style info into my stylesheet, all of a sudden FireFox stopped recognizing all of the stylesheet from that point down. I can’t figure out what’s causing this problem. IE can still parse the entire stylesheet, displaying the list properly. (The list is taken from the ALA 2002 article Taming Lists by the way.)
Copy & paste the code below to embed this comment.
Dan
Sorry for a little off-topic, but I’m struggling with one thing, which maybe you know how to solve
I want a very simple horizontal menu, based on list
I’ve done it, but I wanted it to have a custom bullet, so I used list-style: url(/image.gif); in the ul style declaration
it appeared ok in mozilla, but there is NO image neither in opera nor IE.
well, if I change the image to just ‘circle’ or ‘square’ it does not appear in those browsers anyway
Is it possible to to have bullets (custom too) in horizontal menu based on ul ?
it’s easy to make it in vertical on, but I have not found any example of such menu turned to horizontal…
I am in the process of setting this up and I can’t get it to center on the page like the rest of my page does. I have a container div around my whole page with margin-left and margin-right set to auto, but the secondary nav is always left aligned. Anyone know a remedy?
I was working several mothes ago on a similar NAV on a client site http://www.cfatb.com/ using extensively the sluckerfish inspiration.
I enhanced it to fit our requisites and it seems that it works good on many major browsers. Of course the CSS is free to use as well as the HTML code itself. I think I made some mistakes but it works pretty well.
110 Reader Comments
Back to the ArticleRoman
Your menu behaves badly in Firefox when I increase text size (Ctrl++). Menu items disappear, extraneous lines appear, etc..
Thierry Koblentz
Hi Roman,
Re: my menu (http://www.tjkdesign.com/articles/dropdown/demo.asp)
AFAIK, it is possible to use “Ctrl+” three times in FireFox without breaking the layout; this corresponds to more than the “largest” text-size in MSIE.
In any case, I believe it is much better than what the “Hybrid CSS Dropdowns” menu allows ;-)
Jason
Probably one of the best css solutions I have seen yet. I love ALA!
Gerdus van Zyl
The problem with CSS menus is that navigation is very important and problems with like the flashing effect, cross-browser issues, etc. make it less than ideal.
Another problem I have with CSS only menus is that it tries to do behaviour in CSS for which CSS was not designed. CSS should IMO be presentation only.
Also with XHTML markup, CSS styled but Javascript powered navigation you can do some eye candy like the menus I did for my MXR CMS product. see http://mxdemo.infireal.com/ (P.S: the markup is terrible, its on the todo list)
The menu does a roll-up and fade out effect.
jc
I’m having a problem implementing a list in FireFox. When I added the style info into my stylesheet, all of a sudden FireFox stopped recognizing all of the stylesheet from that point down. I can’t figure out what’s causing this problem. IE can still parse the entire stylesheet, displaying the list properly. (The list is taken from the ALA 2002 article Taming Lists by the way.)
Any suggestions? Thanks!
Miriam Hendel
I was just checking out the linked examples and they look fine in Safari, but totally not working in Explorer??
Dan
Sorry for a little off-topic, but I’m struggling with one thing, which maybe you know how to solve
I want a very simple horizontal menu, based on list
I’ve done it, but I wanted it to have a custom bullet, so I used list-style: url(/image.gif); in the ul style declaration
it appeared ok in mozilla, but there is NO image neither in opera nor IE.
well, if I change the image to just ‘circle’ or ‘square’ it does not appear in those browsers anyway
Is it possible to to have bullets (custom too) in horizontal menu based on ul ?
it’s easy to make it in vertical on, but I have not found any example of such menu turned to horizontal…
thanks
raleigh
I am in the process of setting this up and I can’t get it to center on the page like the rest of my page does. I have a container div around my whole page with margin-left and margin-right set to auto, but the secondary nav is always left aligned. Anyone know a remedy?
Daniel Pedersen
I like this example… :) what is to say..
Manao (arterrien)
I was working several mothes ago on a similar NAV on a client site http://www.cfatb.com/ using extensively the sluckerfish inspiration.
I enhanced it to fit our requisites and it seems that it works good on many major browsers. Of course the CSS is free to use as well as the HTML code itself. I think I made some mistakes but it works pretty well.