Fading drop-down

Freeway
1

Hi All, I have used the following code to fade-in my links on the main menu of this site:

.fwNavItem a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

What I’d love to know is how I make any background hover colour do the same and also the actual drop-down itself just appears rather than fades in.

Many thanks

Mark

http://www.create-photo.co.uk

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Try adding

<style type=”text/css”> .fwNavItem a:hover { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } </style>

See if that gets you some of the way.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Sorry -probably better based on .fwFirstChild ie

<style type=”text/css”> .fwFirstChild a:hover { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } </style>

Dashing out - will look deeper later.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Thanks Dave

First one is doing the same as I have. Second one doesn’t seem to change anything. The drop-down is still appearing instantly.

Thanks

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Update:

Dave; the background is fading in OK but I still can’t get the actual drop-down to fade. The links in the sub-menu are working OK but the appearance of the box is still instant.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

OK - the issue here is that the dropdown uses visibility:hidden and visibility:visible to make it appear on hover.

The problem is that visibility cannot be transitioned as it only has 2 states - hidden and visible

So your problem requires a solution that incorporates transitioning opacity.

Needs more thought.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Here is an example of what I think you are looking for http://deltadesign.co/FW7Test/drop-down-fade-in.html

This uses a combination of visibility:visible/hidden of the CSS menu action with added opacity:0/1 to give the fade in effect.

The code specific to my example is shown on the example page but for those who can’t wait

<style type=”text/css”>
div.fwNavContainer1 ul.sub {opacity:0 !important; }
div.fwNavContainer1:hover ul.sub {opacity:1 !important;  }
div.fwNavContainer1:hover ul.sub  { -moz-transition: all 1.5s; -webkit-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s;}
</style>

D

freewaytalk mailing list
email@hidden
Update your subscriptions at: