How could I achieve the same navigation using CSS3? (currently flash AS3)
Link to my actual flash demo: http://nside-elite.techiedesign.net/redbox/flashtest.html
I created this navigation using Adobe Flash (AS3 script) which works quite well. The problem is that I'm using Drupal for my website's CMS. Trying to implement this flash navigation using Drupal would be a big chore in itself right there. But even then, it would be hard for it to be flexible enough so that I could change the links as needed through Drupal's Primary Links.
One of the last flaws with using a flash-based navigation (even assuming I could get it to work) is that spiders and bots may not index the site correctly if my code uses a great deal of hacks in order to visually have it working.
Now, I can do my own research and coding with CSS as I am very firmilliar with CSS 2.1 and learning basic CSS3 currently. One of the problems I see though is the effect I'm using on mouse hover. I can't see how I could get the metal tab to drop down upon mouse over, and also have the light above it fade in at the same time. The reason why I see this is a problem is because the clickable (or 'hover area') area on the light isn't directly on top of the actual image, but rather below by quite a few pixels.
If you could at least point me in the right direction, that would be great. Thank you!
It certainly is possible to replicate it, but not without some trickery.
You can see a working example here: http://jsfiddle.net/u3n5c/
The essence to solving the problem is realizing that the :hover events will be triggered even if the parent container is smaller than its child. Visually, it seems that the line and the tab are separate elements, but in code they are the typical li > a.