Image revealed when menu opens over it?

[mgason]

Hi is this possible?
can I have a large background image which is hidden except for the area revealed when a menu opens?
It is a bit hard to explain so I put up a page with a couple of graphics that show roughly what I mean.
The menu is created by the CMS and could be changed by the client so I can not just slice it up and put pieces in the menu li items
http://gasolicious.com/menu_question.html

[coothead]

Hi there mgason,


and a warm welcome to these forums. :)

Check out the attachment to see my little attempt at solving your problem. :D

Note:-

I no longer code for those two dinosaurs, IE6 and IE7, other than to deliver plain HTML to them. :cool:

coothead

[mgason]

Hi,
that was awesome of you to go to all that trouble.
I have tweaked the positioning to as perfect as I can get it and put it online for further discussion.
http://gasolicious.com/menu_question/menu_test.html

Here is where I have a problem. The menu is Wordpress. So my client can come along and add a menu item. Also I would have to somehow get Wordpress to #id the menu items!

Maybe if they were fixed width AND I could get Wordpress to use an id I could make CSS that would take care of any reasonable number of menus? Of course I would have to worry about Wordpress changing the ids when an item was added!

I also have this method of doing it. This avoids the problem of ul id's and adding menu items. It uses a slice of the image as a repeating background. This works but does not look nearly as nice as yours because it loses the vertical shading. It does not look nearly as slick.
http://gasolicious.com/menu_question/drop-down-stripy.html

Do you have any further thoughts?
Even design ideas, something that would look good but avoid all of this trouble, say a different treatment for sub menus and just the gradient in the top bar.
Just a thought but is there any way css "clip" could help?

[coothead]

Hi there mgason,

sorry, but I only do bespoke coding. :)
I do not work with CMS. :eek:

The solution provided solved the problem stated. :cool:


I have tweaked the positioning to as perfect as I can get it and put it online for further discussion.
I do not understand why you would "tweak" what was perfectly positioned code. :confused:
That does not make any sense to me. :confused:

coothead

[mgason]

I did not mean to offend!

I had to move the graphic over horizontally a bit in the sub menus so that the stripes matched and flowed vertically all the way through.

You did have the most attractive solution and it does answer the question;)

[coothead]

Hi there mgason,

I am not offended. ;)
But I cannot see the reason for this...
http://gasolicious.com/menu_question/menu_test.html
...which looks really silly.

I have written code for members on various forums, only to be told that they
are unable to incorporate it in this or that "Content Management System". :eek:

Here is a recent and typical example of someone wasting my time...
http://www.htmlforums.com/css/t-links-behind-image-z-index-issue-139394.html
If nothing else, it may bring a wry smile to your face . ;)

coothead