• 1791
  • 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

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

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

Ваше мнение

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

Облако тегов

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