Мой плагинчик carouselMenu

by Denis

HTML

<div class="some-layout">
    
        <nav>
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">ipsum dolor sit amet</a></li>
                <li><a href="">consectetur adipiscing</a></li>
                <li><a href="">elit</a></li>
                <li><a href="">magna a tellus</a></li>
                <li><a href="">sagittis</a></li>
                <li><a href="">pellentesque non sit amet quam</a></li>
                <li><a href="">gravida in faucibus vel</a></li>
                <li><a href="">dignissim eget</a></li>
                <li><a href="">eros quam</a></li>
                <li><a href="">Ut enim ad</a></li>
                <li><a href="">minim veniam, quis</a></li>
                <li><a href="">nostrud exercitation</a></li>
                <li><a href="">ullamco laboris</a></li>
                <li><a href="">nisi ut aliquip</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">ipsum dolor sit amet</a></li>
                <li><a href="">consectetur adipiscing</a></li>
                <li><a href="">elit</a></li>
                <li><a href="">magna a tellus</a></li>
                <li><a href="">sagittis</a></li>
                <li><a href="">pellentesque non sit amet quam</a></li>
                <li><a href="">gravida in faucibus vel</a></li>
                <li><a href="">dignissim eget</a></li>
                <li><a href="">eros quam</a></li>
                <li><a href="">Ut enim ad</a></li>
                <li><a href="">minim veniam, quis</a></li>
                <li><a href="">nostrud exercitation</a></li>
                <li><a href="">ullamco laboris</a></li>
                <li><a href="">nisi ut aliquip</a></li>
            </ul>
        </nav>

</div>

CSS

.some-layout {
    position: relative;
    top: 50px;
    margin: 0 25px;
    max-width: 100%;
    padding: 5px 0px;
    background: #CCC;
}
.nav-wrapper {
    overflow: hidden;
}
nav, ul {
    position: relative;
    min-width: 1000%;
}
nav li {
    float: left;
    padding: 1px 0;
    border-right: 1px solid #CCC;
}
nav li a {
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFF;
    color: #000;
}

.button {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;                
}
.next {
    border-left: 10px solid red;
    right: -15px;        
}
.prev {
    border-right: 10px solid red;  
    left: -15px;
    display: none;
}
.nav-group-0 {
    background: #060;
}
.nav-group-1 {
    background: #036;
}
.nav-group-2 {
    background: #F00;
}
.nav-group-3 {
    background: #FF0;
}
.nav-group-4 {
    background: #8B8682;
}
.nav-group-5 {
    background: #F08080;
}

JavaScript

// САМ ПЛАГИН, (ПОДКЛЮЧЕНИЕ НИЖЕ)
$.fn.carouselMenu = function(options){
    // Опции (если надо - добавите сами, нет - удалите вообще этот кусок)
    // speed - для примера, но рабочий :) Используется, для скорости анимации прокрутки
    options = $.extend({
        speed:1000
    }, options);
    
    // расширяем функциональность класса Array
    Array.prototype.sum = function(){
        for (i = 0, sum = 0; i < this.length; sum += this[i++]){}
        return sum;
    };
    
    // Собственно, все операции тут
    var make = function(){
        var i = 0, 
            g = 0, 
            sumWidth = 0, 
            groupNum = 0,
            navWidth = 0, 
            liCount = 0, 
            groupWidth = 0, 
            navList, ulBlock;
        
        // родительский блок
        var parenBlock = $(this).parent();
        // оборачиваем и добавляем нужные элементы
        $(this).wrap('<div class="nav-wrapper"></div>');
        $('.nav-wrapper').prepend('<span class="button prev"></span>')
            .append('<span class="button next"></span>');
        
        // кнопки навигации
        var butNav = parenBlock.find('.button'); 
        // ширина блока
        navWidth = parenBlock.find('.nav-wrapper').width();
        // блок UL
        ulBlock = parenBlock.find('ul'); 
        // элемент списка
        navList = parenBlock.find('li'); 
        
        // ----  обрабатываем элементы ---- //

        // группируем элементы
        navList.each(function(i, el){
            sumWidth += $(el).width();
            if(sumWidth > navWidth - 50){
                sumWidth = $(el).width();
                g++;
            }
            $(el).addClass('nav-group-' + g);
        });
        
        // функция распределения паддинга
        function rePadding(groupNum) {
            var curGroup = $('.nav-group-' + groupNum);
            groupWidth = curGroup.map(function(i, el){
                return $(el).width();
            }).get().sum();
            var...