Хаки и Скрипты Next Generation CMS : Меню и навигация, JS : FerroMenu JQuery плагин

irbees2008 Опубликовано - 27 - ноября Меню и навигация

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

FerroMenu позволяет:
-Положение меню в одном из 9 опорных точек экрана: верхний левый, верхний-центр, топ-правый, центральный налево, центрально-центр, центр-правый, нижний левый, нижний-центр, нижний правый двигать меню, просто перетаскивая его по экрану. По окончании перетаскивания, меню будет позиционировать себя в ближайшей точке крепления
-настроить меню аспект просто изменив это CSS
-настроить переходы установки их продолжительность, ослабление, задержку из пунктов меню, угол поворота для открывания / закрывания действия, маржу от краев окна просмотра, радиус (т.е. расстояние из пунктов от контроллера)
элементы из меню будет изменен после каждого движения, основываясь на места, доступного по меню.
eneable / выключение перетаскивания функция
инкапсулировать скользящие содержимое в контейнере;

Исходник скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Установка
1.Подключаем скрипты и стили

Код:

<link rel="stylesheet" href="{tpl_url}/css/jquery.ferro.ferroMenu.css" type="text/css">
<script src="{tpl_url}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.ferro.ferroMenu-1.1.min.js" type="text/javascript"></script>

2. Сам HTML код меню

Код:

<ul id="nav">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
    <li><a href="#">item 6</a></li>
</ul>

3.Инициализация по умолчанию

Код:

$(document).ready(function() {
    $('#nav').ferroMenu();
});

Инициализация с параметрами

Код:

$(document).ready(function() {
    $("#nav").ferroMenu({
        position    : "left-center",
        delay       : 50,
        rotation    : 720,
        margin      : 20
    });
});

Читайте Опции раздел для более глубокого объяснения пользовательских параметров.
Опции
Доступные параметры для этого плагина:

Параметр	Доступные значения	Значение по умолчанию	Описание
closeTime	число	500	Меню colsing скорость времени в миллисекундах
delay	число	0	пунктов "анимация отправной задержка в миллисекундах
drag	True \| False	правда	включить / выключить меню перетаскивания вокруг экрана
easing	строка	кубических Безье (0,680, -0,550, 0,265, 1,550)	анимация ослабление. Вы можете использовать каждый HTML5-совместимые easings
margin	число	10	Рентабельность меню в пикселях от краев окна просмотра
position	"Левый-топ '\|' центр-топ '\|' правую верхнюю '\|' правый нижний '\|' центр дном '\|' левой нижней '\|' правой кнопкой центр '\|' левом центре '\|' центр -центр "	'Левой нижней'	Начальное положение в меню в одном из 9 опорных точек
radius	число	100	радиус в пикселях пунктов расстоянии от контроллера меню
rotation	число	0	поворота в градусах, выполняемых пунктов меню на открытие / закрытие
opened	True \| False	ложный	начальное состояние меню: если `<font><font>верно</font></font>` меню открыто, в противном случае (по умолчанию) закрыт
openTime	число	500	Меню открытия скорость времени в миллисекундах

Общественные функции
FerroMenu предоставляет только один открытый метод, который можно назвать извне:

Функция	Параметр	Описание
$. Fn.ferroSlider.toggleMenu ()	-	открыть / закрыть меню

События
FerroMenu предоставляет некоторые пользовательские события:
menuready : срабатывает в конце инициализации меню;
menuopened : срабатывает, когда меню открыто;
menuclosed : срабатывает, когда меню закрыто;
menudragstart : срабатывает на дрэг-начале меню;
menudrag : срабатывает во время увлечения меню;
menudragend : срабатывает на конце лобового сопротивления меню;

Эти события добавить объект, называемый menustatus к JQuery $ событий. объекта, который имеет два простых информацию:
позиция : позиция меню в одном из 9 опорных точек;
открыл : верно , если меню открыто, ложь в противном случае;
Чтобы поймать этого события, вы можете сделать так:

Код:

$(document).ready(function() {
    $(document).on("menuready",function(){
        //do stuff
    });

    $(document).on("menuopened",function(){
        //do stuff
    });

    $(document).on("menuclosed",function(){
        //do stuff
    });

    $(document).on("menudragstart",function(){
        //do stuff
    });

    $(document).on("menudrag",function(){
        //do stuff
    });

    $(document).on("menudragend",function(){
        //do stuff
    });
});

Можешь почитать и вот эту статейку "Разметка Ogmeta без плагина на Twige"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.