<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

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

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

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

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

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

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

Адаптивное меню на CSS flexbox

Адаптивное меню на CSS flexbox

Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.

Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно "не париться" по поводу медиа запросов.

На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.

Адаптивное меню на CSS flexbox.

Шапка состоит из трех логичных блоков:

  1. Блок с логотипом
  2. Блок с меню, сделанное на списках
  3. Блок с иконкой и номером телефона

Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.

Адаптивное меню на CSS flexbox.

Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.

Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.

<body>
  <header class="header">
   <div class="logo">
   <a href="#"><img src="img/logo.png" alt=""></a>
   </div>
   <nav class="menu">
    <ul>
     <li><a href="#">Города</a></li>
     <li><a href="#">Замки</a></li>
     <li><a href="#">Красоты</a></li>
     <li><a href="#">Маршруты</a></li>
     <li><a href="#">Контакты</a></li>
    </ul>
   </nav>
   <div class="phone">
   <i class="fa fa-phone-square" aria-hidden="true"></i>
   +380973457685
   </div>
  </header>
</body>

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

Адаптивное меню на CSS flexbox.

А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.

.header {
   display: flex;
}

.header .menu ul {
   display: flex;
}

Вот так работает flexbox.

Адаптивное меню на CSS flexbox.

Добавим стили и шапка готова. Дальше нам нужно будет её адаптировать под разные размеры экранов. Обратите внимание, как мало написано кода.

*{
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  font-family: "Open Sans", sans serif;
  line-height: 1.5;
}

.header {
  border: 2px solid #ccc;
  display: flex;
  flex-wrap: wrap; /*перенос строки */
  justify-content: space-between; /*прижимает содержимое к краям */
  align-items: center; /*выравнивает элементы по центру на вертикальной */
}

.header .logo {
  padding-left: 30px;
}

.header .menu ul {
  display: flex;
  list-style: none;
}

.header .menu ul li {
  margin: 20px 10px;
}

.header .menu ul a {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #06a327;
}

.phone {
  font-size: 110%;
  color: #333;
  padding-right: 40px;
}

Работаем над адаптивностью шапки

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

Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.

Адаптивное меню на CSS flexbox.

Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.

@media screen and (max-width: 900px) {
  .phone {
    margin: auto;
  }
}

На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.

Адаптивное меню на CSS flexbox.

Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.

@media screen and (max-width: 500px) {
  .header {
    flex-direction: column;
  }
  .header .menu ul {
    flex-direction: column;
    align-self: center;
  }
  .header .menu ul li {
    margin: 5px;
  }
}


Адаптивное меню на CSS flexbox.

Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс "Вёрстка сайта с нуля"

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Web-дизайнер. Web-дизайнер. 08.03.2018 13:01:25

Доброго времени суток Михаил! От себя хочу предложить маленькую поправочку в стили, а именно: в коде CSS с указанием размеров отступов margin: 0; padding: 0; Указывать не просто ноль (0), а дописывать 0px, так как просто ноль не срабатывает.

Ответить

porsake porsake 08.03.2018 13:30:21

уверяю Вас, что работают оба варианта.

Ответить

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