Раздвижное меню при помощи jQuery

Захотелось для одного моего проекта(о проекте немного позже, делаю :)) сделать какое-то вместительно и в тоже время компактное меню. А тут недавно мы наконец-то поставили двери в шкаф купе, от сюда и идея взялась.

Это у меня первый jQuery-плагин, думаю дальше будут еще.

Реализация очень простая. Набор списков(ul) для которых изначально выставляется overflow: hidden и ширина первого элемента списка. А при наведении ширину меняем до полной, аналогично при уходе курсора - выставляем опять ширину первого элемента для всего списка. Ширину элемента нужно брать при помощи .innerWidth() что бы учитывались отступы. И что бы не пересчитывать общую длину каждый раз, я ее ложу в атрибут списка при инициализации.

Весь код доступен на GitHub

И конечно же “как это сделано”:

HTML структура меню:

  • Yamaha

  • KTM

  • Ducati

  • Kawasaki

  • Audi

  • Honda

  • Suziki

  • BMW

  • Mercedes–Benz

  • Merida

  • TREK

  • Kellys

  • Comanche

CSS:

#header {
    background-color: #eee;
}
#header ul.menu,
#header ul.menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
}
#header ul.menu li {
    padding: 2px 5px;
}

#header ul.menu.gray,
#header ul.menu.gray li {
    background-color: #ddd;
}
…

И сам плагин:

(function($){

    $.fn.slide_menu = function(options) {

        var settings = {
            'animate': true,
            'animate-speed': 600
        }

        if (options) {
            $.extend(settings, options);
        }

        return this.each(function(){
            var _this = $(this);
            var li_first = $(_this.find('li:first'));

            _this.attr('full-width', _this.innerWidth());
            _this.height(li_first.innerHeight());
            _this.css('overflow', 'hidden');
            _this.width(li_first.innerWidth());

            _this.mouseenter(function(){
                var _this = $(this);
                var full_width = parseInt(_this.attr('full-width'));

                if (settings['animate']) {
                    var small_width = _this.find('li:first').innerWidth();
                    _this.animate({width: '+=' + (full_width - small_width)}, settings['animate-speed']);
                } else {
                    _this.width(_this.attr('full-width'));
                }
            });

            _this.mouseleave(function(){
                var _this = $(this);
                var small_width = _this.find('li:first').innerWidth();

                if (settings['animate']) {
                    var full_width = parseInt(_this.attr('full-width'));
                    _this.animate({width: '-=' + (full_width - small_width)}, settings['animate-speed']);
                } else {
                    _this.width(small_width);
                }
            });
        });
    }
})(jQuery);