На прошлом уроке , мы привязали к кнопке гамбургер выезжающее меню при клике по ней. Посмотрите демонстрационный пример прошлого урока, как это все работает.
На прошлом уроке, мы привязали к кнопке гамбургер выезжающее меню при клике по ней. Посмотрите демонстрационный пример прошлого урока, как это все работает.
Очевидно, что навигационная панель и кнопка, ориентированы были под мобильные устройства. Для десктопов, нам уже не нужно экономить место и одиноко стоящая кнопка гамбургер, на ширине экрана ноутбука, смотрится как-то жалко.
На самом деле, мы сделали меню навигации, по принципу Mobile first верстки (сначала мобильные). Это когда верстается и адаптируется сайт, двигаясь от мобильной версии к полноценной десктопной.
Что это значит на практике?
Это значит, что в медиа-запросах, делается адаптация под планшеты и лаптопы по нарастающей и мы указываем min-width. Например, на ширине больше чем, 600 пикселей, для некоторых элементов, будут работать новые правила.
Новые правила
Скрыть кнопку гамбургер, показать меню на горизонтальной панели навигации в одной строке, увеличить поля и отступы, там где это надо. Эти новые правила применяться к указанным тегам и классам, начиная с ширины экрана 600 пикселей. Все изменения производятся только в CSS стилях, HTML и JQuery код, мы вообще не трогаем.
Добавим медиа-запросы
/* Для ширины экрана больше, чем 600px */
@media (min-width: 600px) {
.menu{
left: 0;/* показать панель навигации */
}
a{
line-height: 37px;/* выравнивание ссылок по вертикали */
font-size: 16px;
padding: 0 10px;
justify-content: space-around; /* равномерное распределение ссылок */
}
ul{
display: inline-flex;/* отобразить ссылки в строке */
margin-top: 5px;
height: 30px;
}
section{
padding-top: 50px; /* отступы сверху */
}
.gamburger{
display: none; /* прячет кнопку гамбургер */
}
a:hover{
width: 10vw; /* ширина эффекта наведения */
}
}
Демонстрация примера
Заключение
В каких случаях следует применять стратегию Mobile first верстки? Пока на ум приходит только один случай, если предстоит сверстать сайт с очень простым дизайном, то есть мобильная версия мало отличается от десктопной. А для тех, кто только начинает изучать HTML/CSS, советую посмотреть видео-курс, с настоящим реалити-шоу по верстке сайта с нуля.
