[Pro] Fade on CSS Menu (hover)

Ken3 · July 3, 2013, 12:10pm

Hello,

I was wondering if there’s some code I can add to my site so that the CSS Menu fades into and out it’s hover state? just like the softpress website www.softpress.com

TIA

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

waltd · July 3, 2013, 12:30pm

I posted a recipe for this a few years ago:

http://www.freewaytalk.net/thread/view/86312#m_86387

If you’re using Freeway 6, I recommend you use Protaculous 2 for this, not Protaculous. So the directions would change slightly – apply Protaculous 2 to the page, check the “Add Scriptaculous libraries” checkbox, and click the DOM Loaded Observer button to enter the code as described.

Walter

On Jul 3, 2013, at 8:10 AM, Ken wrote:

Hello,

I was wondering if there’s some code I can add to my site so that the CSS Menu fades into and out it’s hover state? just like the softpress website www.softpress.com

TIA

www.softpress.com

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

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

Ken3 · July 3, 2013, 3:11pm

Hello Walter

Thanks, but i’m having some problems, i can’t seem to get it to work. i’ve done as you instructed on the other forum post. heres what i’ve done so far:

Got Protaculous 2, and applied it to my page.
Check the “Add Scriptaculous Libraries” (effects is checked by default)
Click the DOM Loaded Observer button and pasted in the following:

(pasted correctly with the indents in Freeway)

I preview the site and I can’t see that the fade effect has worked on the CSS Menu. Am I doing something wrong?

My CSS Menu is a simple home, about, gallery, news and contact page with no submenus. I also did try adding “$(‘yourItemId’)” in place of the “document” part of the code, as you said in your other forum post (and I did enter “cssmenu” for “yourItemId” too)

thanks

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

waltd · July 3, 2013, 3:39pm

Oh. Without submenus. I see. What are you expecting the fade to act on, then? This script makes the submenus fade in. Did you want the transition between normal and mouseover in the top-level menu to animate? If so, that’s a job for CSS transitions, although they won’t work in versions of IE less than 9. (Progressive enhancement – if the browser is smart enough, you will see the transition, and if it isn’t, you will just see the “snap” color change.)

Add this to your Page / HTML Markup, in the Before section. Remove Protaculous 2 from the page, too. (This code is conditioned on there being a single menu on your page, by the way.)

<style type="text/css">
#fwNav1 {
	-moz-transition: background-color 0.6s;
	-webkit-transition: background-color 0.6s;
	-o-transition: background-color 0.6s;
	transition: background-color 0.6s;
}
</style>

I haven’t tested that, but it should cause all background-color attribute changes to animate within your menu on supported browsers (modern versions of Safari, Chrome, iOS and Android, Firefox, Opera, and IE 9 or better).

Walter

On Jul 3, 2013, at 11:11 AM, Ken wrote:

Hello Walter

Thanks, but i’m having some problems, i can’t seem to get it to work. i’ve done as you instructed on the other forum post. heres what i’ve done so far:

Got Protaculous 2, and applied it to my page.

Check the “Add Scriptaculous Libraries” (effects is checked by default)

Click the DOM Loaded Observer button and pasted in the following:

document.observe(‘mouseover’,function(evt){
var elm;
if((elm = evt.findElement(‘li.fwNavItem’)) && elm.down(‘ul.sub’)){
elm.select(‘ul.sub’).invoke(‘hide’).invoke(‘appear’,{duration:0.3});
}
});

(pasted correctly with the indents in Freeway)

I preview the site and I can’t see that the fade effect has worked on the CSS Menu. Am I doing something wrong?

My CSS Menu is a simple home, about, gallery, news and contact page with no submenus. I also did try adding “$(‘yourItemId’)” in place of the “document” part of the code, as you said in your other forum post (and I did enter “cssmenu” for “yourItemId” too)

thanks

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

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

Ken3 · July 3, 2013, 4:06pm

Hello Walter

Yep that code looks more like what Im after - sorry for not specifying in more detail - I want to get the colors to fade in and out of their hover state so this looks like what I need.

Just tested the code you provided and I can’t see that this is working either, I’ve only got 1 CSS Menu on my master page, and I enter the code in the right place, Page>HTML Markup and in “Before ” (where I also place Google web fonts code). Does the site need to be live online for that code to work?

Sorry to keep you on this post!

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

waltd · July 3, 2013, 4:09pm

No, but if you do put it on line, and post a link, I may be able to debug it.

Walter

On Jul 3, 2013, at 12:06 PM, Ken wrote:

Hello Walter

Yep that code looks more like what Im after - sorry for not specifying in more detail - I want to get the colors to fade in and out of their hover state so this looks like what I need.

Just tested the code you provided and I can’t see that this is working either, I’ve only got 1 CSS Menu on my master page, and I enter the code in the right place, Page>HTML Markup and in “Before ” (where I also place Google web fonts code). Does the site need to be live online for that code to work?

Sorry to keep you on this post!

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

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

Caleb_G1 · July 3, 2013, 6:47pm

No, but if you do put it on line, and post a link, I may be able to debug it.

I’ll spare you the trouble, Walter. Ken, try putting this code before :

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

Note: This will fade in both the text-color and the background color, if you have both set through the CSS menu action settings.

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

Caleb_G1 · July 3, 2013, 6:50pm

Oops, I forgot to mention that you will need to wrap it in style tags, so this is the code you should use:

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

Cheers!

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

Ken3 · July 5, 2013, 10:22am

Hello Caleb

thanks for putting the time into this - i tried that code and when I previewed I could only see the background color of my site, all the items disappeared, would it make a difference that im using an inflow layout?

thanks

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

Caleb_G1 · July 5, 2013, 2:26pm

Ken,

Now, that is odd. Double-check that you copied all the code across. Try previewing in Safari and clearing the cache. If those don’t work, upload it and get me the link. Inline construction shouldn’t be a problem.

It would seem impossible that my code would hide the page from view, as it only targets the links in a CSS navigation menu.

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

waltd · July 5, 2013, 3:30pm

The issue is the missing close quote in the opening style tag. Write it like this:

<style type="text/css">

Walter

On Jul 5, 2013, at 10:26 AM, Caleb Grove wrote:

Ken,

Now, that is odd. Double-check that you copied all the code across. Try previewing in Safari and clearing the cache. If those don’t work, upload it and get me the link. Inline construction shouldn’t be a problem.

It would seem impossible that my code would hide the page from view, as it only targets the links in a CSS navigation menu.

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

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

Caleb_G1 · July 5, 2013, 3:33pm

Facepalm

Thanks Walter.

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

Ken3 · July 6, 2013, 1:40pm

Caleb, Walter

Wow! Brilliant. thanks a bunch chaps

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