Graphic Menu - Mouse-Over, etc.

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.

Author

Messages

Donald Johansson
<20 Posts

Posts:9

12/20/2007 10:25 AM
Hey! I am working on a graphic menu, and have run into a few small things I can't work out: I want a menu that uses graphics for the main buttons, but just html for the sub-menues. How do I use the HideTabName and HideTabNamesByLevel to accomplish this? Are these used in conjuncture with each other? It seems if I set the HideTabName to True it will hide all tab names, no matter what I set the HideTabNamesByLevel to. And if I remove the HideTabName, it seems to make no difference what I set HideTabNamesByLevel to. Also, is there an easy way to get a mouse-over effect in a graphic menu? I am using the menu in Hover mode. I added this to the style: .LinkIcon:Hover { filter:alpha(opacity=70); opacity:0.70; -moz-opacity:0.70; } Which is working in FireFox, but not in IE. Any suggestions? Thank you!! Donald

John Mitchell
Posts:3478

12/20/2007 11:05 AM
Hi Donald, The HideTabNamesByLevel is also a recent addition that I don't think has made it into an official release yet. For the Hover question, it is probably not working because IE doesn't support the :Hover psuedoclass the same as FireFox does. You may have to use some Javascript in the onmouseover event for IE. Or maybe you can work out a way to get the CSS into the iehover class that is used.

Donald Johansson
<20 Posts

Posts:9

12/20/2007 2:44 PM
Thanks for your help. #nav li.iehover { filter:alpha(opacity=70); } does allow me to add a transparency mouse-over effect in IE, but the moment I add the alpha filter to the style, the drop-down menus don't show up any more. So I guess there is some sort of conflict there. Adding a style such as 'border-bottom:2px solid black' does seem to work though. Anyway, I don't think my Javascript skills are good enough to be able to work this one out. Thanks!

John Mitchell
Posts:3478

12/20/2007 3:02 PM
Hmm, I'm not sure but you could try adding that filter down at the other place in the css where the iehover class is used. Maybe it is causing those others not to work somehow, but if you add it as late as possible that may work.

Donald Johansson
<20 Posts

Posts:9

12/20/2007 3:45 PM
I tried it in many places in the CSS, but that didn't seem to make a difference. However, adding img to the tag seems to do the trick in my IE6. I haven't done any extensive testing, but at least this seems to work in FF2 and IE6 on my machine: #nav li.iehover img { filter:alpha(opacity=70); } .LinkIcon:Hover { opacity:0.70; -moz-opacity:0.70; } thanks!

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.