Can I click ‘through’ a DIV?

[MesmerLab]

I’m developing a menu. This menu might have a submenu on some of the pages. Therefore instead of creating different images for each instance, I opted for positioned DIV wrappers around each menu. Wanting to use as little code as possible, I even put the submenu above the menu in the code, so the menu would be laid on top w/o using z-index.

http://www.creative-clay.com/_webwork/b … late2.html

Code:

• Summary
• Positions
• Dashboard
• Cover Me
• Roll Me
• Diversify Me
• Closed

• Home
• Portfolio
• Search
• Features
• Tutorial
• Free Trial

So after banging my head, throwing things and generally scaring my cat, I’ve massaged the code just enough so it looks good on all 4 PC browsers that I have installed on my laptop: FF, Safari, Chrome and even IE.

As you can see, there’s a slight dropshadow on the lower side of the upper menu. This is the graphical piece that I could hack off and place onto the submenu, or keep each menu separate and in one piece. The problem here, the 6 pixels hanging off the main menu block a proper triggering on the top portion of the submenu buttons.

I figure I could use an image map and hardcode the overlaps of the menu, but then that’s not making this whole navigation block very portable. Is there any way to get the submenu to work 100% correctly?

I guess the closest comparison would be how you can designate hit boxes in Flash. And well that would be similar to an image map in HTML.

Let me know if I’m not clear enough in my explanation.
Thanks for reading.

-Jason

[Rob MacKay]

Yo Yo!

Nice menu :)

Firstly I would like to say, with that stylee menu I don’t think the dead 6px at the top of the lower bar will actually matter, as most people aim to click text anyway. But in answer to your question, not you cant – just gotta think of them as solid layers. You could slice your image up a little differently so you include the shadow on the sub menu instead of the main menu bar, but I fear that would cause other problems when the sub menu vanishes leaving no drop shadow :)

And yea you are right I would stay away from image mapping as much as possible :)

[MesmerLab]

I’m glad you like it. I’ve been developing it for the past few days. It is for a client, but I will also be porting it to WP and possibly writing up a tutorial about it. Of course it just expands on ALA’s sliding door, but using only 1 image instead of a right and left image.
http://www.alistapart.com/articles/slidingdoors2/
http://kailoon.com/css-sliding-door-using-only-1-image/

And I’m a perfectionist, but I guess I’ll just have to forget about those 6 pixels, lol.
I like how the whole menu only uses 4 images, and that the whole page is 6kb.

I tried using the LI:A:SPAN code like Kai did, but I just couldn’t get IE and webkit to play right. So after a little reworking of the ALA example I finally had something I could work with.

I’m considering using a jQuery animation to display the submenu, but only if the referring page doesn’t have a submenu. So refreshing a page wont keep animating the submenu. ;) That kind of stuff reminds me of Groundhog Day. But throw a little logic on it and sanity surfaces again.

[Rob MacKay]

hehe – and yea I think most people here can identify with the perfectionist viewpoint :)

[Author]

Posts