Создание меню в виде выезжающих слева направо квадратиков

Задание

Сделать анимированное меню на главной странице сайта.
Меню состоит из конечного количества пунктов (в данном случае 7). Каждый пункт выглядит в виде квадрата определённого цвета.

Отображение меню
Каждый пункт меню появляется скальзя от правого края экрана до своего места поочереди с равными промежутками времени.

Что должно получиться

Листинги

Вывод меню в CMS Modx:
Для вывода меню используется дополнение pdoMenu

[[pdoMenu?
    &parents=`21`
    &level=`1`
    &limit=`7`
    &firstClass=``
    &lastClass=``
    &hereClass=``
    &outerClass=`main-menu`
    &tplOuter=`@INLINE 
    <div [[+classes]]>
        [[+wrapper]]
        <div class="clearfix"></div>
    </div>`
    &tpl=`@INLINE
        <div class="[[+alias]] box">
            <a href="[[+link]]">[[+pagetitle]]</a>
        </div>`
]] 

HTML который должен получиться
Его не надо прописывать, он сам выведется модулем pdoMenu

    <div class="main-menu">
        <div class="sergeyananiev-ru">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/sergeyananiev-ru.html">sergeyananiev-ru</a>
        </div>
        <div class="regcomp-su">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/regcomp-su.html">regcomp-su</a>
        </div>
        <div class="bopipizza-ru">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/bopipizza-ru.html">bopipizza-ru</a>
        </div>
        <div class="pro-krep-ru">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/pro-krep-ru.html">pro-krep-ru</a>
        </div>
        <div class="dom-salon-com">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/dom-salon-com.html">dom-salon-com</a>
        </div>
        <div class="tay-fun-ru box" style="margin-left: 10px;">
            <a href="http://n-service.su/services/web-sites-creation/portfolio/tay-fun-ru.html">tay-fun-ru</a>
        </div>
        <div class="clearfix"></div>
    </div> 

Стили
Размеры вывода прямоугольников (пунктов меню) смело можно изменять, селектор: .main-menu > div, Скрипт сам подсчитает суммарную ширину, главное чтобы она не превышала ширину окна браузера.

.main-menu {
    display: block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    overflow: hidden;
    margin: 5px auto;
}
.main-menu > div {
    display: block;
    box-sizing: border-box;
    width: 90px;
    height: 90px;
    float: left;
    overflow: hidden;
    border: 1px solid blue;
    border-radius: 5px;
    margin-left: 10px;
}
.main-menu > div:first-child {
    margin-left: 0;
}
.main-menu > div:last-child {
    width: 100%;
    height: 1px;
    float: none;
    border: none;
    margin-left: 0;
}
.main-menu > div > a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: .7em;
    color: black;
    padding: 10px 1px;
    text-align: center;
}

Скрипт
Вызов скрипта кидаем в самый конец, перед закрывающим body, не задываем подключить jquery и jquery-ui

$(document).ready(function() {
    
    var countItems; // Количество пунктов меню 
    var itemWidth; // Ширина квадрата одного пункта меню
    var itemHeight; // Ширина квадрата одного пункта меню
    var itemMargin; // Отступ от предыдущего пункта меню
    var menuWidth; // Ширина окна меню
    
    
    countItems = ($('.main-menu').children('div').length) - 1; // Последний .clearfix исключаем
    itemWidth = parseInt($('.main-menu > div').css('width')); // Получаем ширину  квадрата одного пункта
    itemHeight = parseInt($('.main-menu > div').css('height')); // Получаем высоту  квадрата одного пункта
    itemMargin = parseInt($('.main-menu > div:nth-child(2)').css('margin-left')); // У первого и последнего отступа нет
    menuWidth = itemWidth*countItems + itemMargin*(countItems-1); // Выщитываем ширину окна меню
    
    // Устанавливаем ширину и высоту окна меню
    $('.main-menu').css({
        'width': menuWidth,
        'height': itemHeight
    }); 
    
    $('.main-menu > div').css('margin-left', menuWidth);

    // Анимируем появление пунктов меню
    for(var i = 1; i <= countItems; i++) {
        if(i==1) {
            $('.main-menu > div:nth-child('+i+')').animate({
                'margin-left': '0'
            },500);
        }
        else {
            $('.main-menu > div:nth-child('+i+')').animate({
                'margin-left': '10'
            },300*i);
        }
    }
    $('.main-menu > div.clearfix').css('margin-left', 0); // Убираем отступ у последнего блока
});

Планирую сделать модуль отзывов