<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

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

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

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

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

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

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

Адаптивное меню для сайта. Часть 2

Адаптивное меню для сайта. Часть 2

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

Откройте в Google Chrome "Инструменты разработчика", сверху появится панель проверки адаптивности. Вы медленно уменьшаете окно браузера с вашим сайтом и фиксируете контрольную точку в пикселях, после которой уже начинаются проблемы - ломается дизайн, одни элементы сайта наскакивают на другие. Такое безобразие происходит на ширине экрана - 724 пикселей.

Адаптивное меню для сайта. Часть 2

Мы опытным путем определили контрольную точку - 816 пикселя, когда все элементы на сайте, выглядят прилично, но после этой отметки, уже так не скажешь.


Медиа-запросы в CSS

Итак, наш первый медиа-запрос будет для ширины экрана, меньше чем 816 пикселей. Что это означает на практике? Мы видим, что наше меню уже не помещается полностью на меньшем экране. Самый эффективный способ переписать стили так, чтобы меню стало вертикальным. Новые стили переопределяют старые и на ширине экрана меньше 816 пикселей, вместо горизонтального меню появится вертикальное.

@media screen and (max-width:816px) {
  header {
    display: flex;
    align-items: flex-start;
    height: 65%;
}
  nav ul {
    display:block;
}
  }

Адаптивное меню для сайта. Часть 2

Появилось не только само меню, но и кнопка - включающая и выключающая меню (на смартфонах вертикальное меню может перекрывать отстальной контент). Конечно, не сама же она там появилась, а это мы туда её поставили в HTML файл, после закрывающего тега nav.

<div>
    <a href="#" class="menu-trigger">Меню</a>
</div>

Задали ей стили и сразу спрятали.

.menu-trigger {
    display:none;
    margin-right: 1.5em;
    background: #D56287;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

В медиа-запросе кнопка стала видимой.

.menu-trigger {
    display:block;
}

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

@media (max-width: 359px)
{
  .logo img {
    margin-left: 0.1em;
}
  }

Теперь на любых разрешениях меню хорошо выглядит и можно смело назвать его адаптивным.

Адаптивное меню для сайта. Часть 2

Манипуляции с кнопкой "Меню"

Кнопка отобразится на сайте, при ширине окна меньше 816 пикселей. Подключаем к HTML файлу библиотеку jQuery и JavaScript файл.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="js/index.js"></script>

Ждем когда загрузится документ.

$(document).ready(function() {
..
});//end ready

Выключать меню будем с помощью метода .slideToggle, выберем элемент по которому будет происходить клик - это ссылка с классом .menu-trigger,

$('.menu-trigger').click(function()

при клике по которой будет запускаться функция .slideToggle для меню (ul li) с продолжительностью по времени 500 ms.

$('ul li').slideToggle(500);

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

Здесь исходный код адаптивного меню вместе с медиа-запросами и JS-кодом:

See the Pen Responsive header with logo and nav menu by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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