I have created a menu using the CSS menu action and I would like the sub menus to fade in/out. I can’t find anything about it. Can anyone help? Thanks in advance.
TB
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s not something that Freeway can do on it’s own. That trendy effect requires a javascript library, and these days is most frequently done using jquery. I’m sure Walt has a protaculous method up his sleeve as well.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks, chuckamuck. Walt?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sure. Here you go. Apply Protaculous to the page, if it isn’t already.
Choose scriptaculous-packed from the library picker. Click the top
Function Body button and paste in the code from this Gist. This will
apply the same function to all menus on the page:
To make it specific to a single menu, click once on that menu’s
container HTML box, note the name that Freeway gave it, and change the
first line of code from
document.observe(...
to
$('yourItemId').observe(...
You can change the speed of the effect, or add a delay to the effect
if you like, by modifying the parameters hash (the part inside curly
brackets on the fourth line). If you wanted a little pause before the
effect, you would change that to:
{delay:0.1,duration:0.3}
Times are in seconds, so you use decimal numbers to indicate less than
one second.
Walter
On Feb 28, 2011, at 7:56 AM, twb716 wrote:
Thanks, chuckamuck. Walt?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Amazing, Walter! It works perfectly. Thanks so much!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
No problem, glad you like it.
Note that it doesn’t (and can’t) fade out, only fade in. This trick
works on the fade-in by instantly hiding the submenu with JavaScript
at the same moment it’s revealed by CSS, then fading it back in with
more JavaScript. So in this direction, we’re not concerned that CSS
has shown it, because everything else happens after that moment. But
in the opposite direction, there’s no way to make it appear again
after CSS has hidden it so we can then gently fade it back out. Once
CSS has hidden it, it’s gone.
The reason that the jQuery effect can do the effect in both directions
is that it is using JavaScript for everything – all the hiding and
showing is done in one layer, not part in JavaScript and part in CSS.
The benefit to the way that Freeway does it is that it will work in
any browser that uses CSS – which is everything that’s able to be run
on a semi-modern OS – even if JavaScript is switched off in that
browser. If you have JavaScript off, you’ll just miss out on the fade,
not the entire menu.
Walter
On Feb 28, 2011, at 11:47 AM, twb716 wrote:
Amazing, Walter! It works perfectly. Thanks so much!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Good to know, thanks, Walter. I was more concerned about the fade in anyway. I actually find a menu that fades out a little annoying anyway. You rock.
TB
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hello Walt
I was hoping you might be able to help me with the Fade in menu.
I have applied the effect to my menu (which isn’t online yet) but when using the menu in the browser and Freeway preview the menu tends to disappear when I move the mouse down the menu. Is there anything I can do about this? I also need to stop the sub menu from moving when I hover over the main menu entry which becomes bold on mouse over.
Thanks in advance
Rory
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you post a link?
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hey Walt
Very quick reply… Thanks!
The website I have online at the moment is:
That was created with Goldfish. Apart from the fact the fading isn’t there the menu works nicely appearing and disappearing on mouse over (On ‘Portfolio’). I could upload the site as is tomorrow morning maybe? Or could I post the file on here?
Cheers
Rory
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 17 Apr 2011, 12:29 am, Rory wrote:
Hey Walt
Very quick reply… Thanks!
The website I have online at the moment is:
That was created with Goldfish. Apart from the fact the fading isn’t there the menu works nicely appearing and disappearing on mouse over (On ‘Portfolio’). I could upload the site as is tomorrow morning maybe? Or could I post the file on here?
Cheers
Rory
hello. i also used walt’s protaculous and it works beautifully with safari, firefox and chrome, but not with internet explorer though. and i also see that the menu fades and when i move the cursor the menu disappears (very briefly) and fades back in again.
any ideas from walt (or anyone else who may know) would be greatly appreciated.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 17 Apr 2011, 12:29 am, Rory wrote:
Hey Walt
Very quick reply… Thanks!
The website I have online at the moment is:
That was created with Goldfish. Apart from the fact the fading isn’t there the menu works nicely appearing and disappearing on mouse over (On ‘Portfolio’). I could upload the site as is tomorrow morning maybe? Or could I post the file on here?
Cheers
Rory
hello. i also used walt’s protaculous and it works beautifully with safari, firefox and chrome, but not with internet explorer though. and i also see that the menu fades and when i move the cursor the menu disappears (very briefly) and fades back in again.
any ideas from walt (or anyone else who may know) would be greatly appreciated.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you post a link to your page that shows the problem?
Walter
On Nov 28, 2011, at 2:46 PM, Ali wrote:
hello. i also used walt’s protaculous and it works beautifully with safari, firefox and chrome, but not with internet explorer though. and i also see that the menu fades and when i move the cursor the menu disappears (very briefly) and fades back in again.
any ideas from walt (or anyone else who may know) would be greatly appreciated.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 28 Nov 2011, 6:54 pm, waltd wrote:
Can you post a link to your page that shows the problem?
Walter
On Nov 28, 2011, at 2:46 PM, Ali wrote:
hello. i also used walt’s protaculous and it works beautifully with safari, firefox and chrome, but not with internet explorer though. and i also see that the menu fades and when i move the cursor the menu disappears (very briefly) and fades back in again.
any ideas from walt (or anyone else who may know) would be greatly appreciated.
sure thing. here you go: www.qrgco.com
and thank you for the quick reply.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
There appear to be some functions in the CSS Menu Action that horse around with the list structure just for IE. It is possible that one of those is making the element fail to match the conditions in my code. It’s hard to say, though. What version of IE are you having difficulty with here?
Walter
On Nov 28, 2011, at 2:59 PM, Ali wrote:
sure thing. here you go: www.qrgco.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 28 Nov 2011, 7:25 pm, waltd wrote:
There appear to be some functions in the CSS Menu Action that horse around with the list structure just for IE. It is possible that one of those is making the element fail to match the conditions in my code. It’s hard to say, though. What version of IE are you having difficulty with here?
Walter
On Nov 28, 2011, at 2:59 PM, Ali wrote:
it’s ie 9. and you know the more i think about it, its not that big of a deal if only ie is causing the problem. seeing how nicely it works with the other browsers makes me happy enough to not mind the ie bug. but if you do find a way to work through that, i would love to know.
by the way walt, i have had many questions since picking up freeway pro and many of my questions have been answered by your posts … so i thank you for sharing your knowledge with the rest of us.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
hello, i try this in freeway pro 6, but i dont understand what means with "Click the top Function Body button " am stuck.
thanks so much for help.
Where put this code?
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});
}
});
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Apply Protaculous 2 to the page, then click the (renamed) DOM Loaded Observer button and paste the code there.
Walter
On Feb 21, 2013, at 10:16 PM, jgalicia wrote:
hello, i try this in freeway pro 6, but i dont understand what means with "Click the top Function Body button " am stuck.
thanks so much for help.Where put this code?
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});
}
});
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
thank you.!! but it does not work, this is the site produce.mx / index
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You’ve set everything up correctly in Protaculous, the only issue I see here is that there aren’t any submenus in your main menu. There’s only the top-level options. You need to set up your sub-options for each main option, by nesting a second-level list item below each one.
Walter
On Feb 21, 2013, at 10:30 PM, jgalicia wrote:
thank you.!! but it does not work, this is the site produce.mx / index
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options