<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать выезжающее меню на JQuery.

Как сделать выезжающее меню на JQuery.

Всем привет! В этой статье мы рассмотрим, как сделать выезжающее меню с использованием JQuery.

Если вам нужно сделать выезжающее меню на сайте, то самый простой способ - использовать библиотеку Sliide.

Вы можете расположить меню слева, сверху, справа или снизу. Чтобы было понятнее, посмотрите демки.

Для чего использовать?

Например, у вас есть div, который вы хотите анимировать выезжающим эффектом с области за пределами просмотра в саму, собственно, область просмотра. Вы хотите иметь полный контроль над блоком и не беспокоиться об позиционировании или о том, как растянуть его по всей области экрана. Вы также не хотите думать о том, как анимация влияет на остальную часть страницы, как бороться с прокруткой и логикой активации и деактивации меню.

Какие зависимости?

Для работы нужна библиотека JQuery 2.1.0 или более новой версии. По идее должно работать и с более старыми версиями, но могут быть проблемы. Никаких файлов стилей не нужно, все стили встроенные.

Плагин поддерживает Chrome, Firefox, Safari, IE 10/11 и Edge.

Как использовать?

  • Скачайте и подключите JQuery
  • Скачайте и подключите файл скрипта
  • Вам будет нужен div(nav или что угодно) и установите его свойство visibility в hidden. Вам также потребуется объект с настройками
var settings = {
  toggle: "#sliiider-toggle", // селектор для меню
  exit_selector: ".slider-exit", // селектор для кнопки выхода, если она необходима
  animation_duration: "0.5s", // продолжительность анимации
  place: "left", // откуда меню будет выезжать(слева, справа, сверху, снизу)
  animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", // кривая анимации
  body_slide: true, // установите в true, если хотите чтобы выезжала вся страница, а не только div
  no_scroll: true, // установите в true, если хотите отключить прокрутку во время показа меню
};

$(‘#menu’).sliiide(settings); // инициализация
  • Если вы собираетесь выдвигать меню горизонтально, тогда вам будет нужно установить стиль ширины блока, и плагин автоматически увеличит его высоту до максимальной. Если вы собираетесь выдвигать меню вертикально, вам будет нужно установить высоту для блока, и плагин автоматически увеличит ширину блока до максимальной.
  • Для вас доступны полезные функции
var menu = $('.left-menu').sliiide({place: 'left', exit_selector: '.some-exit-selector', toggle: '#some-toggle-selector, no_scroll: true, body_slide: true'});

menu.activate(); // активирует меню
menu.deactivate(); // деактивирует меню
menu.reset(); // удаляет все стили, что были добавлены к любому элементу

Итак, на этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.