AboutAndrew Hoffman Expertise I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.
Experience Experience in the area I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.
What I'm doing now My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com
I wanted to change it into a flyout menu and was thinking that css might be the easiest way to do it. Is there such a thing as a css rollover flyout menu? Could I use the jpgs I already created to make it?
Thanks!!
Allie
Answer I think this will suit you very well. Pure CSS using no JavaScript at all.
You should be able to keep the jpgs you've already created as well. It seems you'll have to use them as a background images in .menu a and hide the text using CSS.
But since you will have different images to use as background images, you'll have to assign IDs to each <a> and reference them in the CSS.
.menu a { /* applies to all <a> inside <ul> with class 'menu' */
text-indent:-9999px; /* hide the link text */
}
.menu a#about_us { /* targets only <a> using id 'about_us' */
background: url('image1.jpg') 0 0 no-repeat;
}
.menu a#catalina { /* targets only <a> using id 'catalina' */
background: url('image2.jpg') 0 0 no-repeat;
}
and so on...
Just make sure to keep your IDs unique, as repeating an ID two or more times will cause unpredictable bugs.
