• 1658
  • 0
  • Адаптировал: 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пунктов "анимация отправной задержка в миллисекундах
dragTrue | Falseправдавключить / выключить меню перетаскивания вокруг экрана
easingстрокакубических Безье (0,680, -0,550, 0,265, 1,550)анимация ослабление. Вы можете использовать каждый HTML5-совместимые easings
marginчисло10Рентабельность меню в пикселях от краев окна просмотра
position"Левый-топ '|' центр-топ '|' правую верхнюю '|' правый нижний '|' центр дном '|' левой нижней '|' правой кнопкой центр '|' левом центре '|' центр -центр "'Левой нижней'Начальное положение в меню в одном из 9 опорных точек
radiusчисло100радиус в пикселях пунктов расстоянии от контроллера меню
rotationчисло0поворота в градусах, выполняемых пунктов меню на открытие / закрытие
openedTrue | Falseложныйначальное состояние меню: если phphighlight('верно') меню открыто, в противном случае (по умолчанию) закрыт
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
});
});

Можешь почитать и вот эту статейку "Хак - Добавление в редактор кнопочек цвета и размера шрифта"

mistakes

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element