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
});
});Можешь почитать и вот эту статейку "Добавление в социальные закладки"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.