20 replies [Last post]
asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Anybody know how this fading menu works? I tried looking at the javascript and html / css but couldn't get it to work for me.

http://minifolio.binaryvein.com/

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Good god, why would you want

Good heavens, why would you want to do that? It makes the site virtually unusable!

It is a cardinal mistake to break user's expectations. That site does it in spades!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Even the Fading?

Hahaha, I'm a little confused. I see that it isn't validated, but it seems like that may be some other things in the code, are you saying you feel like it would just be unnecessary?

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 49 weeks 3 days ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

I totally agree with Ed...

I totally agree with Ed... WHY would you want to do that? It drives me nuts.

asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Asking...

Asking to see if you know, i don't want to use it... Just want to know how it's done.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

asimpleart wrote:Asking to

asimpleart wrote:
Asking to see if you know, i don't want to use it... Just want to know how it's done.

Some things it is better not to know... But the basic answer will be "with javascript".

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Haha

Ohkay Ohkay... We'll let it go for now.

Triumph (not verified)
Anonymous's picture
Guru

Ed Seedhouse wrote:Good

Ed Seedhouse wrote:
Good heavens, why would you want to do that? It makes the site virtually unusable!

It is a cardinal mistake to break user's expectations. That site does it in spades!
Look at the <head>

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 8 years 2 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

haha, nice find, I didn't

haha, nice find, I didn't pick that one up triumph.

Thinking abstractly, you could maybe do an effect involving dhtml, I think this one may use it for that purpose:
http://www.apycom.com/image-fade-menu/ex1.html

Personaly, I'd stay away from that if possible though.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its actually quite a neat

Its actually quite a neat effect, but its a poor place to use it.

Its also dissappointing that people like that think that using DIVs and adding a skip link makes the site accessible.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 50 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Couldn't it be done by

Couldn't it be done by replacing the background image with a non-repeating animated gif that appears to fade on hover?

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

No. The fade happens after

No. The fade happens after hover. If the animated gif was on the normal state then the animation would show on page load.

If you were desparate for such and effect and you were paying me I'd write a (JS) mouse out event handler that altered the background colour from the hover colour to the non-hover colour in small steps using a timer and callback.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 50 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Ok, but if you were willing

Ok, but if you were willing to have the whole menu fade on the initial loading of the page, then you could use the non-repeating animated gif as the normal state, and a solid block of cover for hover right? I mean, if you hovered over something and it changed the image, when it changed back afterwards it would still animate for the first time right?

Which would mean the downside would be the fact they would all fade at the same time on the pages first load!

Have YOU said Hello yet?
The CSSCreator Hello Thread

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

DHTML heaven, suddenly I'm

DHTML heaven, suddenly I'm taken back to those halcyon days where this was all the rage Smile looks really cool if you run the mouse up and down the links really quickly

The javascript looks straightforward enough, I'm sure I've seen this sort of effect recently with one of the javascript toolkits (after all so many of them seem to be an attempt to sneak DHTML back in quietly)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

moo.fx is aimed at this sort

moo.fx is aimed at this sort of stuff.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris..S wrote:moo.fx is

Chris..S wrote:
moo.fx is aimed at this sort of stuff.

Probably why I have avoided it ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 50 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

So was I completely off the

So was I completely off the mark with my animated GIF thing or might it work? I only want to know because it would be quite a funky and extremely easy to do effect if it did work!

Have YOU said Hello yet?
The CSSCreator Hello Thread

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

burlster wrote:... extremely

burlster wrote:
... extremely easy to do ...

Try it. Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 50 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Indeed I will, though

Indeed I will, though unfortunately that may be a challenge for me here at work (flashing and fading malarky on a screen is hard to keep discreet Wink )

I'll let you know how I get on.

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 50 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Nope, I shall have to wait

Nope, I shall have to wait until this evening when I will have access to my loveable Corel PhotoPaint where I can easily create a fading animated Gif set to no repeat.

Then all shall become clear.

Will let you know,

J Laughing out loud

Have YOU said Hello yet?
The CSSCreator Hello Thread

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 8 years 2 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Just trying to think of if

Just trying to think of if there is any disadvantages to a gif... Filesize, if it needs to be the full width or taller than the menu, especially with a fade animation (colour intensive). Gif's just don't get the same look as a dynamic look achieved through something more dynamic (that doesn't make sense, sorry).

With jquery, there is support for a drop down clickable menu, I wonder if that would be tweakable to produce a similar type of effect.