July 13th, 2003, 08:08 PM
Using Images for menu items in a DHTML menu
Edit: For clarification, i'm trying to do the same thing as here:
but with rollover images instead of text. (the example loads in the left margin)
I'm trying to build a navigation system that uses nothing but images for each menu item. And, on top of that, each item must be a "rollover" with a normal, over, and on (active) state.
I know, I know, that's easy, but the hard part is that there are submenus which follow the exact same design, load to the right of the main menu, and cover up the site's content while hovered.
I've seen code for DHTML menus that do exactly what I want, but they are all built to handle text, not images. In a perfect world, that's what i'd be using, but I answer to a higher power (the client) and they want a SPECIFIC font for navigation - and that requires using images.
Can anyone point me to a site, or discussion thread (i've looked here but can't find one that discusses my particular dilemma) that discusses this?
Even better, could someone point me to a "cut and paste" solution somewhere? I've googled and searched Macromedia's Dev Exchange with no luck.
The problem i'm having is getting a menu item to "unhide" a div onmouseover, while still retaining it's "hover" state, and then, when moving the mouse over the submenu, having that now unhidden div stay visible AND have the main menu item that called the submenu stay in a hover state.
Thanks in advance,
Zunch Communications, Inc.
Last edited by MountinYew; July 13th, 2003 at 09:03 PM.
July 13th, 2003, 08:57 PM
I remember seeing an article by Danny Goodman on O'Reilly's web site about a week ago about using tri-state rollover images for this purpose. If the post is still there, it might be helpful. However, I don't understand the submenu part and how that is complicating things.
I've done a similar thing using two-state rollovers using Photoshop 5.5 and ImageReady. I do have a drop-down menu on part of it (all done with images for the same reason--client preference, though I liked it better without the dropdown, which tends to jiggle under some circumstances). You can take a look at it at http://users.aol.com/wesuydam/lashish and see if it's like what you're trying to do. I've posted it there for the client to view, but feel free to take a look. Maybe it's not far off from what you're trying to accomplish.
July 13th, 2003, 09:01 PM
Well, I guess I missed your last paragraph before I made my reply... But I don't think it gives me anymore to add. Sounds pretty complex and a little hard for me to visualize. Maybe someone heavier duty will grasp it better than I.
July 13th, 2003, 09:08 PM
July 14th, 2003, 05:10 PM
Thanks but neither of those links is helpful to my problem.
I have edited the message to give a link to a page that shows what i'm trying to do. (the example uses text, not images)
Rollovers aren't a problem. Hiding/Showing a div isn't a problem. Sub menu's isn't a problem - it's just putting all three together that's the problem.
July 14th, 2003, 09:27 PM
Okay, now I see what you're trying to do. But it looks like more of a project than I'm willing to take on as a freebie, so I'll just sugget a couple of approaches.
One is to load the required font on your server and proceed with the text version you already have, which presumably works. If you don't already know how to do that, there's a post somewhere on these pages with a link that tells you how. (The question was "trying to see fonts," posted by snalex.) I suspect you already know how. The only downside is that the font has to be downloaded to every user's browser, but it should let you sleep nights.
Another is to take a straight CSS approach and manage all the hidden and visible blocks or divs that way. I still haven't tried that one myself, because of the backwards compatibility issues.
The simplest would be to download the appropriate font, but the latter method should work if you take the time and don't need to cross frame boundaries.