fancy menu

[technoArtist]

Has anyone ported the fancy menu over to MooTools 1.2 yet?
http://devthought.com/tags/menu/

[Gary Hussey]

that's cute. I've never seen that before. the sitesays it's using the most recent version of mootools.

[technoArtist]

On Jun 22, 12:27 pm, "Gary Hussey" <seventha...@gmail.com> wrote:
> that's cute. I've never seen that before. the sitesays it's using the most
> recent version of mootools.
>

The most recent version though, was for Mootool1.1.

Here is the base code that I am trying to port over to MooTools1.2.
Things like $E are no longer used in 1.2

var SlideList = new Class({
initialize: function(menu, options) {
this.setOptions(this.getOptions(), options);

this.menu = $(menu), this.current =
this.menu.getElement('li.current');

this.menu.getElements('li').each(function(item){
item.addEvent('mouseover', function()
{ this.moveBg(item); }.bind(this));
item.addEvent('mouseout', function()
{ this.moveBg(this.current); }.bind(this));
item.addEvent('mouseout', function(){ this.moveBg.delay(1,
this.current); }.bind(this));
item.addEvent('click', function(event){ this.clickItem(event,
item); }.bind(this));
}.bind(this));

this.back = new Element('li').addClass('background').adopt(new
Element('div').addClass('left')).injectInside(this.menu);
this.back.fx = this.back.effects(this.options);
if(this.current) this.setCurrent(this.current);
},

setCurrent: function(el, effect){
this.back.setStyles({left: (el.offsetLeft)+'px', width:
(el.offsetWidth)+'px'});
(effect) ? this.back.effect('opacity').set(0).start(1) :
this.back.setOpacity(1);
this.current = el;
},

getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},

clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},

moveBg: function(to) {
this.timer = $clear(this.timer);
if(!this.current) return;
this.back.fx.custom({
left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]
});
}
});

SlideList.implement(new Options);


// afects floater back
window.addEvent('domready', function() {
// Navbar
if($('menubar'))
FancyExample = new SlideList($E('ul', 'menubar'), {transition:
Fx.Transitions.backOut, duration: 1000, onClick: function(ev, item)
{ }});

});

[Gary Hussey]

I was considering morphlist.js the menu, but I see now those must be seperate, because morphlist runs only in 1.2.

[nelson]

I change the script, ot works for me

var SlideList = new Class({
initialize: function(menu, options)
{
this.setOptions(this.getOptions(), options);
this.menu = $(menu), this.current =
this.menu.getElement('li.current');
this.menu.getElements('li').each(function(item)
{
item.addEvent('mouseover', function()
{ this.moveBg(item); }.bind(this));
item.addEvent('mouseout', function()
{ this.moveBg(this.current); }.bind(this));
item.addEvent('mouseout', function()
{ this.moveBg.delay(1,this.current); }.bind(this));

//item.addEvent('click', function(event)
{ this.clickItem(event,item); }.bind(this));

}.bind(this));

this.back = new
Element('li').addClass('background').adopt(new
Element('div').addClass('left')).injectInside(this.menu);

//!this.back.fx = this.back.effects(this.options);
//this.back.fx = this.back.set('tween',this.options);
this.back.fx = new Fx.Morph(this.back,this.options);

if(this.current) this.setCurrent(this.current);
},

setCurrent: function(el, effect)
{
this.back.setStyles({left: (el.offsetLeft)+'px', width:
(el.offsetWidth)+'px'});
(effect) ?
this.back.effect('opacity').set(0).start(1) :this.back.setOpacity(1);
this.current = el;
},

getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},

clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},

moveBg: function(to) {
this.timer = $clear(this.timer);
if(!this.current) return;

this.back.fx.start({
'left': [this.back.offsetLeft, to.offsetLeft],
'width': [this.back.offsetWidth, to.offsetWidth]
});


// $('myElement').tween('height', [20, 200]);
//this.back.fx.tween('left', [this.back.offsetLeft,
to.offsetLeft]);
//this.back.fx.tween('width', [this.back.offsetWidth,
to.offsetWidth]);
/*this.back.fx.tween({

left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]

});*/
/*this.back.fx.custom({

left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]

});*/
}

});

SlideList.implement(new Options);

[Angel Marquez]

do you have a root.zip you can send, please...?

thank you.

[loodex]

thx very much
Not really good at using mootools, can you tell how do you make the
call in the domready, I've tried but it won't work.
Even with removing the $E, it's says SlideList is not defined ? weird
because I'v got the external file with your code in my page.

[loodex]

Or is it possible to have a zip file too :)
thx

louis....@gmail.com

[horseweapon]

Hi, I made my own rewriting of the class, because it could use a bit
more than just renaming functions

here is a RAR file that contains the rewritten class for 1.2, a demo,
which contains the css, and the images
http://soletme.free.fr/fancymenu.rar

On Jul 22, 8:58 am, loodex <louis.grel...@gmail.com> wrote:
> Or is it possible to have a zip file too :)
> thx
>

> louis.grel...@gmail.com

[ali]

Hi,
That is so beautiful.
But I need submenu.
anybody can help me?

On Jul 22, 11:33 pm, horseweapon <oliviercous...@gmail.com> wrote:
> Hi, I made my own rewriting of the class, because it could use a bit
> more than just renaming functions
>
> here is a RAR file that contains the rewritten class for 1.2, a demo,

> which contains the css, and the imageshttp://soletme.free.fr/fancymenu.rar

[Enric]

@ali: something like this would help you? =>
http://www.mooforum.net/help12/fading-and-out-sub-nav-with-hover-trigger-t40.html

[Guillermo Rauch]

http://devthought.com/morphlist/

--
Guillermo Rauch
http://devthought.com