Fade-effects for menu bar and iFrame-content

[syd]

Hey,

i'm currently working on a webpage which includes a menu-bar and an iFrame which displays the altering content. That works fine, but now i want to add some effects to it.

On this page: https://www.die-pest.de/ you have two things i'd like to do, too.

First, there is a soft fade-to-white in the menu-bar when you hover your mouse over it.
I searched through the possibilitys of Events, Animations and Motion Effects but I can not find anything that is suitable to do such kind of thing to my responsive menu. Any thoughts about it?

Second, you have a fade-out and fade-in every time the content in the main-section changes. I managed to make my iFrame content fade-in (i think it was a "on load" event) but I can't get it to fade-out when I click on a different link. Is this even possible?
I think of a combination like: onclick: iFrame-fade-out, JS-return:true - to make the content appear, iFrame-fade-in. The End.

Regards, syd.

[Pablo]

The responsive menu does not support transitions, but you can use the CSS menu which does support several transitions.
Or add this code, in Page HTML

Code: Select all

<style>
#wb_ResponsiveMenu1 li a
{
   transition: all 500ms linear;
}
</style>

I think the only way to add a fade out effect is if you set a 'hook' to the click event of the menu and load the new content via JavaScript, because otherwise the browser will open the new page directly.
I do not have a standard solution for this, so this requires a custom script.

Alternatively, you can use a Carousel instead of an inline frame and use each slide as a page.
See this example:
http://www.wysiwygwebbuilder.com/suppor ... index.html

Or else maybe this extension will be useful?
http://www.wysiwygwebbuilder.com/pagetransitions.html

[syd]

Thx Pablo.

The Css-Menu works pretty well with those transition effects.

I'll definetly check out your other advices.