CSS Menu functionality help

The new CSS menus are very cool - Does anyone know if the SoftPress site uses this method in their own site menus?

I’m trying to duplicate the same style (their rollover is a translucent blue over the main underlying header png with a revealed cascading menu)

I can’t seem to attach a CSS Menu to a rollover and make it reveal from that rollover. I can make it work with the older Menu Method (FW4).— or can’t this be done with the new CSS Menu method since it can’t be linked/slaved to a button?

Any suggestions to use the new CSS menu combined with a rollover to reveal it would be appreciated if it is possible to do..

regards

quote

The Softpress site does use the CSS Menu action in FW5 Pro. Don’t know what rollover you are referring to as translucent blue, but it was done as a css menu. If you look at the page code you will see reference to #fwNav1 which is the CSS menu section. There is a “menu-background” graphic for the normal state, and “menu-background-over” and “menu-background-highlight” graphics for the two different over states. The drop down sub menus are also done with the CSS Menu action.

Take a look at the CSS Menu action pallet to find all the options available.

Did you take a look at this tutorial? http://softpress.com/products/cssmenus.php

quote

Indeed, I have read that page. And the black Freeeway Site top menu on that page is exactly the one I’m trying to duplicate (different design, of course, but same functionality.)

The underlying FW Banner is a single PNG, the menu bar is a continuous gradiant bar in that png. No need to cut up and place a multitude of buttons.

So, since this is a CSS menu, then it is aligned over the top of this PNG with a clear normal state Bg that when moused over turns a translucent blue as the hidden sub menues are revealed. It’s the blue part I’m having trouble recreating…

I’ll try inserting/selecting a rectangular semi-transparent graphic in the action selection and see if that works in the mouse-over position. If that’s it, they have the measurment and placement perfectly alligned to the underlying PNG graphic.

Anyway, this new CCS menu appears to have great design potential, just have to figure all it’s parameters out….

Have a look (if you have time) at the FW black menu bar— can you tell me eactly where/how the blue mouse-over was done and to what action parameter it was set it?

Appreciate the time and help.

regards

quote

Hi DVTVFilm,

Have a look (if you have time) at the FW black menu bar— can you tell me eactly where/how the blue mouse-over was done and to what action parameter it was set it?

This was by clciking the Use Image option in the Background Hover section of the Action palette. You should then see an Image option, use this to say what image you want to use for the background hover state of the menu items. The Repeat and position options determine whether you want the image to tile or not and where you want the image to be positioned within the menu item.

I hope this helps.

Joe

On 3 Sep 2008, at 12:57, DVTVFilm wrote:

Indeed, I have read that page. And the black Freeeway Site top menu on that page is exactly the one I’m trying to duplicate (different design, of course, but same functionality.)

The underlying FW Banner is a single PNG, the menu bar is a continuous gradiant bar in that png. No need to cut up and place a multitude of buttons.

So, since this is a CSS menu, then it is aligned over the top of this PNG with a clear normal state Bg that when moused over turns a translucent blue as the hidden sub menues are revealed. It’s the blue part I’m having trouble recreating…

I’ll try inserting/selecting a rectangular semi-transparent graphic in the action selection and see if that works in the mouse-over position. If that’s it, they have the measurment and placement perfectly alligned to the underlying PNG graphic.

Anyway, this new CCS menu appears to have great design potential, just have to figure all it’s parameters out….

Have a look (if you have time) at the FW black menu bar— can you tell me eactly where/how the blue mouse-over was done and to what action parameter it was set it?

Appreciate the time and help.

regards

quote

Ok, I’ve reproduced the way the Main Freeway banner works, with a semitransparent image (jpeg) set in the HOVER/USE IMAGE slot. Works great.

However, the jpeg, no matter how large I make it, doesn’t alter the height of the display when published—meaning that if my jpeg 14px or even 24px high, by 30px wide—- the resulting published page will have a moused over graphic that will be the correct width (30px) — but neither 14px or 24px in height (depending on which test jpeg I chose) — but rather the published height result seems tied to the FONT Size— therefore I am forced to increase the font size to reveal/attain the intended transparent graphic dimensions I’m using.

I don’t think this is what FW has done since their semi-blue overlay fills the menu bar to the exact dimensions needed while the FONT is relatively small.

Any thoughts and how they are getting their result on getting the height exact on their page for the blue hover and still maintain a small menu font size?

Any combination of “REPEAT” in the action parameter for this seems to make no difference.

regards

quote

This is precisely how background images work. If you want the menu elements to be a particular size, you will need to add some new styles to the page to increase the padding inside the element that the background gets attached to.

Can you post a link, so I can take a look at it in Xyle scope?

Walter

On Sep 3, 2008, at 5:58 PM, DVTVFilm wrote:

the resulting published page will have a moused over graphic that will be the correct width (30px) — but neither 14px or 24px in height (depending on which test jpeg I chose) — but rather the published height result seems tied to the FONT Size— therefore I am forced to increase the font size to reveal/attain the intended transparent graphic dimensions I’m using.

quote

Thanks Waltd— I haven’t posted it yet as I’m still designing. Give me a few days to get it on line and then I can impliment your tweaks..

Thanks

quote