Описание

Вчера написал небольшой, но многофункциональный плагин под названием Buildmenu 1.0
Этот плагин автоматически создаёт меню на страницах вашего сайта из имеющихся элементов.
Скрипт больше всего подходит для больших лендингов, у которых меню не влазит во всю ширину экрана или же Вам нужно адаптивное меню.

Как работает плагин

1. выбирает на странице все заданные ему элементы, например h1 или h2 (любые элементы содержащие текст).
2. получает из каждого элемента текст и формирует ссылки, которые помещает в меню.
3. новое меню, которое создал скрипт (динамически) фиксируется в верхней части сайта. Меню создано!
4. при нажатии на любой пункт меню, страница автоматически прокручивается до того блока, с которого была создана эта ссылка.
В момент прокрутки страницы, меню тоже будет смещаться до определённого пункта.
Меню так же будет смещаться даже если пользователь сам будет прокручивать страницу вниз или вверх. В этот момент на меню будет активен (гореть) тот пункт, который соответствует блоку находящемуся в поле видимости на сайте.
 
Подключить плагин очень просто.
 
Нужно загрузить всего два файла buildmenu.css и buildmenu-1.0.min.js и подключить их в шапке.
<link rel="stylesheet" type="text/css" href="css/buildmenu.css">
<script data-src="js/buildmenu-1.0.min.js"></script>
Ну и инициализировать сам плагин, т.е. запустить:
$("element").buildMenu();

Не забудьте подключить библиотеку jquery.
 
Плагин хорошо работает на мобильных устройствах, можете сами проверить.
 
В нём есть 8 настроек, такие как скорость появления, скорость прокрутки, скорость анимации и т.д.
Подробнее всё это вы можете почитать на странице самого плагина, там же его и скачать.
 
Я выкладываю архив плагина сюда, но те кто хочет скачать без регистрации, переходите на demo и скачивайте бесплатно:
buildmenu-1.0.rar Загрузок: 57 [1,8 Kb]
 
Demo
 
С ув. Владимир

Скриншоты

Жалоба

Комментарии 3

  1. 0

    Wild

    Попробовал прикрутить на лэндинг пэйдж сгенерированный Mobirise4, нифига не вышло.
    Точнее див менюхи генерируется, но он пустой.
    <ul></ul>
    27.05.2020 00:23 Ответить
    1. 0

      Kylaksizov

      Значит не так что-то подключили, как видите на демо все работает.
      27.05.2020 07:56 Ответить
  2. +1

    Alex

    Спасибо, я давно искал такой плагин. Круто!
    5.07.2015 18:33 Ответить

Добавить комментарий

    • Смайлы и люди
      Животные и природа
      Еда и напитки
      Активность
      Путешествия и места
      Предметы
      Символы
      Флаги
Кликните на изображение чтобы обновить код, если он неразборчив

Похожие товары