Background Image Menu

Poster: EdSygrove
Dated: Thursday January 11 2007 - 18:27:41 GMT

Hi there..
I have been working on an image based menu to try and emulate (more or less) the menu on this site, http://www.propertyjigsaw.co.uk (which my company own). I have a basic menu working but have a few issues that I am struggling to sort out, hopefully you will be able to give me some pointers. The issues:
1. I have installed the menu in a table cell on each page of the site. How do I get the menu to show the selected menu item when the user moves from one page to another? Essentially the background tab image needs to be displayed on the new page as if a mouseover was occuring.
I know I can do this by having slightly different menus for each page but there must be a more elegant method.
2. The visual appearance of the menu itself relies on the tab appearing to raise when the mouse is placed over an image. As both main image and background image are the same size, text placed in the menu item always appears in the same place and doesn't look raised. Is there anything I can do about this short of placing the text in each image - which I didn't really want to do.

I realise these may be pretty simple queries but I'm not a programmer (at least not these days!), I'm just helping out a friend and am reaching the edge of my abilities.

Many thanks, Ed

Poster: Ruth
Dated: Thursday January 11 2007 - 19:03:38 GMT

Hi,

I'd be glad to help on this but you need to get a test menu up with the menu data and the images so I have something with which to work. For example, you would use openmenusbyurl.js module to get the other pages to show the 'on' tab. To get your on tab to look bigger, what you do is create the off tab that size BUT you make the upper part actually a transparent area. That is, the tabs have to be the same size but they don't have to have the tab in the same place. I don't know how to explain it better. If I had the images I could make some for you to see. Let's say they are all 40px high, the off tab would actually start at 10px from the top of the image and that top ten pixels would be made to be transparent the on tab would start at the 0px position.

If you can get me the menu data and the tabs I'll set something up. It really is fairly easy to do, it's just one of those things that is so hard to explain and describe

Ruth

Poster: EdSygrove
Dated: Thursday January 11 2007 - 20:59:31 GMT

Thanks Ruth,
I've a test site area up and going at http://www.propertyjigsaw.co.uk/test. I've added the menu to two pages only and these are accessed from the Home tab and the Business tab respectively. The menu and images are all in the menus folder off .co.uk/test.

I understand what you mean about the 'on' and 'off' tab appearances. That works well for the raising and lowering of the tab but any text on the tab remains aligned to the middle of the image area rather than appearing to rise with the tab. Its not a massive problem, I'll just redo the tabs with image text on them but I was hoping to keep things a little less 'hard'.

As far as the openmenusbyurl is concerned, I've tried that but the selected tab does not rise. I'm not good with Java but it seems to me that this code is designed to open sub menus and I don't have any, I just want the tab to rise automatically in the new page. Is pagematching the way forward?

Look forward to hearing from you.

Ed

Poster: Ruth
Dated: Friday January 12 2007 - 4:11:12 GMT

Hi,

No, the text can rise. Give me a bit of time and I'll set something up. You can do such setups by using css to style the menu, I think. I'll have to play with it, but I'd think you could use things like line height to cause text shift, using on and offclass to call the styles and set line height differently for off and on. Not sure, but experimenting should tell us.

Ruth

Poster: Ruth
Dated: Friday January 12 2007 - 7:16:28 GMT

Hi Ed,

OK, I figured out how to do it. Here is a zip file with the images, main_home_menu1.js and menu_data1.js files.

LINK REMOVED

On your test page, put the images in the same folder with the page for testing because I just left the paths as the image name.

Anyway, change the file names on your test page to the ones I sent, make sure the paths are correct and that you have the files there. At the top of the page add this style code.



If you look in the menu_data1.js file under the main menu style you'll see those classes being called.

It works in IE5.5 and FF1.07. You'll have to test on others.

Information on what I did:

I made new images and separator images and over separatorimages. This gives you an actual tab look since the separator was made from the right side of the original image. You do not have to use any of these images, you can use your old ones, the style code for positioning the text will still work.

I also added pagecolor, and text-decoration:underline for the page class, again, you can change the underline to none in the pageclass css and you can eliminate or change the pagecolor. I was just testing some things.

Hope this helps. Let me know when you get the file so I can remove it.

Ruth

Poster: EdSygrove
Dated: Friday January 12 2007 - 10:58:43 GMT

Ruth,
Thanks very much for this - great service.

Just two things to overcome (one minor, one more important). The minor one is that the menu doesn't appear right justified in the cell anymore now that each tab is sized based on its text content - not a big issue this.

The more important one is that there are a lot of pages that are launched from the individual pages in the site rather than the menu itself but each page kind of belongs to a family so where a page that belongs to, say, the 'Business' family is launched I'd like to pop up the Business tab on the menu. I'm sure there's a way to do this but I can't fathom it

Other than that we're almost there.

Thanks again for your help..(I have downloaded the files you sent me now too - just to confirm)

Ed

Poster: Ruth
Dated: Friday January 12 2007 - 17:37:08 GMT

Hi,

The pagematch property is what you need to do something like that. You use it to match a 'folder' rather than a page. That means a directory structure where the 'family' pages are in their own folder. So given a directory structure of root/about, you would add pagematch=root/about/ and then any page in the about sub folder would show that raised tab on the menu no matter how someone got there, menu or page link. So, in the menu you'd have to put the pagematch in each item and use the folder matching option that would go with that item.

I'll take a look at the other issue, though that may not be fixable since the menu is positioned relatively and you're using divs on top of that. Divs are a real hassle, not because of the menu but because all the different browsers out there have decided to have their own way of reading div characteristics.

Ruth

Ruth

Poster: EdSygrove
Dated: Monday January 15 2007 - 17:09:19 GMT

Thanks for your help with all this. I have now fully implemented the menus ( __at__ http://www.propertyjigsaw.co.uk). They work fine but with one hiccup. Every page loads fine first time in both IE and Firefox but when refreshed in IE the main table in the page gets pushed a little to the right which messes up the content inside.

I have tracked it down to the last menuitem in the tab menu, this was set as separatorwidth=7;. With this removed the menus stay in the right place all the time and the page never 'corrupts' on refresh. However, of course the last tab is no longer 'tabbed' on the right hand side

Is there any other solution other than leaving the last tab as as a 'hard' tab image?

Many thanks

Ed

Poster: Ruth
Dated: Monday January 15 2007 - 22:54:18 GMT

Hi,

The only other solution I can think to try would be to put that separator image into a table cell, that is create your table to have a little cell at the end and put that separator image into it so the last menu item looks like it has a curve on it.

You might also try putting image=trans.gif; into that last item which I have set as just a separator and then use a transparent image that is 7px wide. Other than that, I can't think of anything

Ruth