<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

Подписавшись по 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):

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