Создание сайтов в Челябинске. Продвижение. Оптимизация

Разработка сайтов, поисковая оптимизация, продвижение, техническая поддержка и обслуживание вебсайтов любой сложности. Быстро, качественно и по разумной цене.

Fancy меню для Joomla

Fancy меню (как у нас на сайте) для Joomla появилось, как бы не соврать, году в 2008 и набрало популярность во многом благодаря YooTheme. Есть множество скриптов для реализации такой симпатичной фишки, но вот проблема в Joomla 2.5 и Joomla 3.0 используются последние версии mootools и старые скрипты не годятся. Вот немного подправленный скрипт, который используется у нас:

var MorphList = new Class({   
  
  Implements: [Events, Options],
  
  options: {/*             
    onClick: $empty,
    onMorph: $empty,*/
    bg: { 'class': 'background', 'html': '<div class="inner"><div class="inner-2"><div class="inner-3"></div></div></div>' },
    morph: { 'link': 'cancel' }
  },
  
  initialize: function(menu, options) {
    var that = this;
    this.setOptions(options);
    this.menu = $(menu);
    this.menuitems = this.menu.getChildren();
    this.menuitems.addEvents({
      mouseenter: function(){ that.morphTo(this); },
      mouseleave: function(){ that.morphTo(that.current); },
      click: function(ev){ that.click(ev, this); }
    });       
    this.bg = new Element('li', this.options.bg).inject(this.menu).fade('hide').set('morph', this.options.morph);
    this.setCurrent(this.menu.getElement('.current'));
  },          

  click: function(ev, item) {
    this.setCurrent(item, true);
    this.fireEvent('click', [ev, item]);
  },
  
  setCurrent: function(el, effect){  
    if(el && ! this.current) {
      this.bg.set('styles', { left: el.offsetLeft, width: el.offsetWidth});
      (effect) ? this.bg.fade('in') : this.bg.fade('show');
    }
    if(this.current) this.current.removeClass('current');
    if(el) this.current = el.addClass('current');    
    return this;
  },         
         
  morphTo: function(to) {
    if(! this.current) return false; 
    this.bg.morph({ left: to.offsetLeft, width: to.offsetWidth});
    this.fireEvent('morph', to);
    return this;
  }

});

new MorphList($$('.navigation')[0], {transition: Fx.Transitions.backOut, duration: 300 }); //пример использования
new MorphList($('navigation'), {transition: Fx.Transitions.backOut, duration: 300 }); //или вот так