[Pro] How can I do a rollover for these menus?

Freeway
1

http://www.thinktankcd.com/Test/Stowasis/choosing-your-feature.html

On this page you can see 4 navigation menus, 3 of which we are currently playing with.

The main menu to the left is a standard CSS menu with drop downs, but the client doesn’t like the way they pop out to the right, so we’re now looking at accordions using moo tools.

Menus 2 and 3 are both accordions built using html items in 2 different styles, but the question with both is how do I show a rollover to indicate the user is hovering over an item?

Any suggestions?

Neil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Nobody??

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

This is going to take some hand-edited CSS, and you won’t be able to
see the effect of it in the design view – only in the Preview or a
browser.

You could create a style in your Styles palette with this un-lovely Tag:

.mooFaqHref:hover

and absolutely nothing in the Name field, and apply a background color
to that style. Problem here is that the way this element is laid out,
the only “hot” part of the link will be a tiny box shrink-wrapped
around the letters of the link text.

You could try adding another style with the Tag:

.mooFaqHref

and again, nothing in the Name field, and use the Extended dialog in
the Edit Style dialog to add

display
block

as a Name and Value for an attribute of that style.

But that might blow up your layout, because there looks to be a lot of
padding in the surrounding P (style10) which is going to press in
against the link. If you remove all of that padding, and add it to
the .mooFaqHref style itself, then you can have a big fat link that’s
easy to click, and your mouseover highlight will be the entire size of
the “tab”, too.

Walter

On Apr 23, 2010, at 5:25 AM, neil.west1 wrote:

http://www.thinktankcd.com/Test/Stowasis/choosing-your-feature.html

On this page you can see 4 navigation menus, 3 of which we are
currently playing with.

The main menu to the left is a standard CSS menu with drop downs,
but the client doesn’t like the way they pop out to the right, so
we’re now looking at accordions using moo tools.

Menus 2 and 3 are both accordions built using html items in 2
different styles, but the question with both is how do I show a
rollover to indicate the user is hovering over an item?

Any suggestions?

Neil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Thank you Walt, I tried the first both of your suggestions but only got the first one to work (I obviously overlooked something). Either way, the one that worked didn’t give me quite the effect I was after.

I’ve been experimenting and discovered that I can use regular rollovers within the accordion but I’ve still got a couple of problems:

have a look at http://www.thinktankcd.com/Test/Stowasis/index.html

  1. On this page you can see the accordion navigation menu with working rollovers (only in the stainless section for products). Now navigate to any other page, and they don’t work!

The menu is set up on the master page with rollovers set to show on mouseover but on every ‘child’ page, they are set to show normally. This means that I have to go through every page copying and pasting a correct menu which is a bit of a pain in the arse. So why aren’t the master item settings carrying over the the child pages?

  1. In the stainless steel dropdown, the sub-sections are created by dropping a 90px x 90px image into a 90px x 90px html item as a background image. A graphic item is then pasted into the html item (also 90 x 90) and a 90 x 90 rollover graphic is imported into that. Why does that imported graphic, when ‘scaled to box’ appear bigger then the identically sized graphic below it and shows 830% in the transform box? I then have to manually tweak it to appear correct (820%)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Sometime around 3/5/10 (at 08:16 -0400) neil.west1 said:

Why does that imported graphic, when ‘scaled to box’ appear bigger
then the identically sized graphic below it and shows 830% in the
transform box? I then have to manually tweak it to appear correct
(820%)

Random guess: perhaps the imported image’s pixel-per-inch setting?
Open it in Photoshop and check the Image Size dialog to see what this
might be. And try importing it with the Ignore Resolution checkbox
(found in the Import dialog) checked.

But like I said, that’s a random guess.

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Random guess: perhaps the imported image’s pixel-per-inch setting?
Open it in Photoshop and check the Image Size dialog to see what this
might be. And try importing it with the Ignore Resolution checkbox
(found in the Import dialog) checked.

But like I said, that’s a random guess.

Brilliant!! Thanks, that was exactly it!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options