<MyRusakov.ru />

WordPress 5 с Нуля до Гуру

WordPress 5 с Нуля до Гуру

Этот курс даст Вам всю необходимую теорию по созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Помимо всей необходимой теории, Вы также получите и всю практику, так как прямо в курсе с нуля создаётся полноценный сайт, который затем выкладывается в Интернет. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

Сам курс проходится буквально за вечер, а ценнейшие знания остаются с Вами навсегда!

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

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

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

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

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

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

Меню для мобильной версии сайта

Меню для мобильной версии сайта

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

Как всегда, начнем с HTML-разметки.

Создадим обертку-контейнер mobile-wrap, внутри которого будет обертка nav-wrap для логотипа и ссылок навигационного меню navLinks, а так же иконка гамбургер.

<div class="mobile-wrap">
<div class="nav-wrap">
  <a href="#home" class="active">Логотип</a>
  <nav id="navLinks">
    <a href="#portfolio">Портфолио</a>
    <a href="#work">Услуги</a>
    <a href="#contact">Контакты</a>   </nav>
  <a href="#" class="icon" onclick="barFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Для подключения иконки, загрузим библиотеку FontAwesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Под навигационной панелью, для наглядности, создадим секцию с контентом.

<section>
  <h3>Вертикальное мобильное меню</h3>
  <p>Демонстрация примера, как может выглядеть меню для мобильной версии сайта.</p>
  <p>При клике по иконке гамбургер-меню, появится меню сайта.</p>
</section>

Смотрим промежуточный результат.

Меню для мобильной версии сайта.

Приступим к стилизации

Зададим контейнеру размеры, автоматическое выравнивание, цвет фона и текста.

.mobile-wrap {
  max-width: 400px;
  margin: auto;
  background-color: #5d4037;
  height: 450px;
  color: #fff;
}

Все, что выйдет за пределы навигационного блока, будет скрыто. А содержимое контейнера расположим относительно самого блока. Если не задать свойство position: relative, то иконка-гамбургер улетит на правую сторону браузера.

.nav-wrap {
  overflow: hidden;
  background-color: #5d4037;
  position: relative;
}

По умолчанию, блок навигационного меню, должен быть спрятан с экрана. Пользователь, кликнув по иконке, сам вызовет меню с cсылками.

.nav-wrap #navLinks {
  display: none;
}

Зададим стили для ссылок блока навигационного меню.

.nav-wrap a {
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

Расположим гамбургер-меню в верхнем правом углу панели.

.nav-wrap a.icon {
  background: #212121;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

При наведении мыши, цвет фона всех ссылок внутри блока-контейнера, станет светлее.

.nav-wrap a:hover {
   background-color: #d7ccc8;
  color: #000;
}

Создадим активный класс, со своим цветом фона для логотипа.

.active {
  background-color: #7c4dff;
  color: #fff;
}

Пропишем отступ от левого края для секции с контентом.

section {
  padding-left: 16px;
}

Мы закончили оформлять и прихорашивать наше меню.

Меню для мобильной версии сайта.

С помощью JavaScript-а, запрограммируем механизм переключения от состояния невидимых ссылок до их появления. В качестве такой кнопки-переключателя у нас будет иконка-гамбургер, а само событие onclick (клик), вешается на ссылку.

<a href="#" class="icon" onclick="barFunction()">
  <i class="fa fa-bars"></i>
</a>

Создание функции

Придумываем название функции, получаем тег nav по id и присваиваем его переменной x. В нужном месте, мы просто пропишем x, вместо длиной записи. Дальше создадим условие if-else: Если блок навигационного меню виден, то нужно его спрятать. В противном случае сделать видимым.

function barFunction() {
  var x = document.getElementById("navLinks");
  if (x.style.display === "block") {
  x.style.display = "none";
  } else {
  x.style.display = "block";
  }
}

Функция выполнится, когда пользователь кликнет по иконке, чтобы увидеть или спрятать меню.

Меню для мобильной версии сайта.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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