<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

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

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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