Fade-effects for menu bar and iFrame-content

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
syd
 
 
Posts: 15
Joined: Wed Nov 25, 2020 3:41 pm

Fade-effects for menu bar and iFrame-content

Post by 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.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Fade-effects for menu bar and iFrame-content

Post by 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
 
 
Posts: 15
Joined: Wed Nov 25, 2020 3:41 pm

Re: Fade-effects for menu bar and iFrame-content

Post by syd »

Thx Pablo.

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

I'll definetly check out your other advices.
Post Reply