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 ложный начальное состояние меню: если 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

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

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

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

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