Buildmenu Jquery 1.0

Скачать Buildmenu 1.0

загрузок: 221

GitHub

Описание плагина

Buildmenu - идеально подходит для сайтов или лендингов с большим контентом и с множеством пунктов меню.

Данный плагин автоматически создаст меню на любой странице Вашего сайта.

8 настроек скрипта + отдельный css для оформления меню и его анимации.


Плагин производит поиск заданых элементов на странице, выбирает у них текст, создавая пункты меню.

Пример работы плагина можно наблюдать на этой странице, это меню создано с помощью плагина.

Установка плагина

Загрузите файлы buildmenu.css и buildmenu-1.0.min.js к себе на сайт.

Между тегами head подключите файл стилей и сам скрипт:

<link rel="stylesheet" type="text/css" href="css/buildmenu.css">
<script src="js/buildmenu-1.0.min.js"></script>

            

В любом месте на сайте вставьте следующий код:

<script>
    $(function(){
        // element - любой элемент вида <div>, <p>, .class, #id и т.д.
        $("element").buildMenu();
    })
</script>

            

Готово!

Настройка плагина

Данные настройки заданы по умолчанию.

$(function(){
    $("element").buildMenu({
        menuHide: true,       // true - скрывать меню, false - не скрывать
        speedShowMenu: 300,   // скорость появления меню
        speedHideMenu: 500,   // скорость скрытия меню
        startBuild: 50,       // сколько пикселов нужно прокрутить от верха, что бы появлялось меню?
        scrollTopBlock: 50,   // отступ сверху до активного блока при нажатии на меню
        jointMenu: 1,         // cколько пунктов меню оставлять слева
        activeMenu: "center", // инициализация активного пункта меню при появлении блока на экране
                              //(количество пикселов от верхней границы окна браузера до блока px|"center")
        speedScroll: 1000     // скорость прокрутки блоков при нажатии на меню
    });
})
            

Например, если нам нужно изменить скорость анимации прокрутки, то можно добавить всего одну настройку.

Это будет выглядеть так:

$(function(){
    $("element").buildMenu({
        speedScroll: 1000
    });
})
            

Скорость анимации прокрутки самого меню, производится в файле buildmenu.css

.buildMenu ul{
    text-align: center;
    transition: 3s; // скорость анимации меню 3 секунды
    margin: 0;
    padding: 0;
    width: 9999px
}
            

Скачать Buildmenu 1.0




Скачать Buildmenu 1.0

загрузок: 221

Пятый блок

Все остальные блоки вставлены для примера работы данного плагина.

Screen Android

Buildmenu jquery

Седьмой блок

Восьмой блок

Девятый блок

Десяты блок

Одинадцатый блок

Двенадцатый блок

Тринадцатый блок

Четырнадцатый блок

Пятнадцатый блок

Шестнадцатый блок

Семьнадцатый блок

Автор

Автор плагина: Kylaksizov Vladymyr

Сайт: Kylaksizov.ru