<MyRusakov.ru />

Joomla 3 с Нуля до Гуру

Joomla 3 с Нуля до Гуру

Видеокурс «Joomla 3 с Нуля до Гуру» поможет Вам повысить свой уровень в веб-разработке и научит создавать удобные и эффективные сайты на Joomla 3. Курс подходит как для опытных вебмастеров, так и для новичков, кто ещё только начинает.

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

После планирования начинается техническая реализация и создание собственного адаптивного шаблона.

Далее рассмотрен процесс переноса и настройки на хостинге, оптимизация под поисковые системы и защита от хакерских атак.

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

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

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

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

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

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

Выезжающее боковое меню. Часть 2

Выезжающее боковое меню. Часть 2

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

Обращаемся к библиотеке jQuery

Находим ссылку с классом menu-icon, внутри которой иконка-бургер и когда произойдет событие onclick, выполнится функция,

$('.menu-icon').on('click', function(e) {

которая найдёт выезжающее меню с классом menu и применит метод toggleClass к меню. Метод toggleClass присваивает и удаляет классы у элемента.

$('.menu').toggleClass('menu_active');

При клике по иконке-бургеру слева выезжает меню. Теперь надо сделать так, чтобы контент отодвигался, уступая место меню. Для этого создадим новый класс section_active, который при событии будет двигать секцию с контентом на 25% вправо, как и меню.

.section_active {
    transform: translateX(25%);
}

Добавим к селектору section плавность - transition в полсекунды. Чтобы секция не перекрывала собой иконку, то зададим ей позицию - relative, секция должна быть на нижнем слое - z-index: 0.

section {
    transition: 0.5s;
    position: relative;
    z-index: 0;
}

Вытащим меню поверх секции

.menu {
    z-index: 1;
}

Вернемся к jQuery, который найдет элемент section, присвоим ему класс section_active.

$('section').toggleClass('section_active');
})

Итак, мы получили полностью адаптивное меню, которое хорошо работает на всех разрешениях экрана.

Хотите научиться создавать красивые и динамические сайты? Посмотрите мой видео-курс.

Весь код + результат

See the Pen CSS3 left menu + jQuery by porsake (@porsake) on CodePen.

Выезжающее меню справа

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

.menu {
    left: 75%; /* вместо 0 */
    transform: translateX(100%); /* вместо -100% */
}

и одно значение у секции при клике

.section_active {
    transform: translateX(-25%); /* вместо 25% */
}

Весь код меню справа + результат

See the Pen CSS3 right slide menu by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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