Я решил выпустить цикл советов по мотивам работ студентов Школ бюро. Мы рассмотрим решение типовых задач в вёрстке и найдём ответы на самые простые вопросы, возникающие у новичков.

В сегодняшнем совете сверстаем простую шапку «в линию», которая встречается на огромном количестве сайтов, в том числе на сайте бюро.

Макет шапки в Фигме:

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

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

Накидаем каркас будущей шапки в ХТМЛ:

<header>
  <div class="logo">
  </div>
  <div class="menu">
  </div>
  <div class="tel">
  </div>
</header>

Идём вглубь. Ставим изображение в СВГ с логотипом и делаем его ссылкой на главную страницу:

<header>
  <div class="logo">
    <a href="/">
      <img src="logo.svg" width="60" height="60px" />
    </a>
  </div>
  <div class="menu">
  </div>
  <div class="tel">
  </div>
</header>

Меню по смыслу — вытянутый в линию список. Поэтому сверстаем его списком:

<header>
  <div class="logo">
    <a href="/">
      <img src="logo.svg" width="60" height="60px" />
    </a>
  </div>
  <div class="menu">
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div class="tel">
  </div>
</header>

Номер телефона — тоже ссылка, по которой можно позвонить:

<header>
  <div class="logo">
    <a href="/">
      <img src="logo.svg" width="60" height="60px" />
    </a>
  </div>
  <div class="menu">
    <ul>
      <li><a href="/products">Продукция</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <div class="tel">
    <a href="tel:88004000500">8 800 4000 500</a>
  </div>
</header>

Располагаем все три основных блока шапки в линию с помощью флекса:

header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

Теперь разберёмся с меню. Чтобы привести его в порядок, нужно:

  • обнулить левый отступ у списка (по умолчанию он всегда задан встроенными стилями браузера),

  • вытянуть пункты меню в линию,

  • задать отступы между пунктами меню,

  • предусмотреть красную плашку под активным пунктом,

  • убрать стандартные точки перед пунктами списка,

  • стилизовать ссылки.

Ещё нужно заставить меню занимать всё свободное место и прижимать номер телефона к правому краю страницы.

Изучим макет. Отступы между пунктами меню — 40 пикселей:

Ширина отступов от краёв плашки активного пункта меню до текста внутри неё — 10 пикселей по бокам и по 8 пикселей сверху и снизу. Плашку я специально сделал полупрозрачной, чтобы разглядеть красные цифры разметки:

Расстояние от логотипа до меню — 40 пикселей:

Вытягиваем пункты меню в линию, убираем точки, обнуляем отступы со всех сторон — они нам не нужны. Само меню должно занимать всё доступное место — добавляем flex-grow:

.menu {
  flex-grow: 1;
}

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

Задаём отступы между пунктами меню. Ставим 20 пикселей, а не 40, потому что по 10 с каждой стороны отъедает плашка каждого пункта меню. Нам нужно это учесть, чтобы ничего не дёргалось при переключении. У последнего пункта нужно убрать отступ справа, чтобы он не мешался. Саму плашку будем делать у ссылки:

В примере мы добавляем плашку с помощью padding со всех сторон — это увеличивает область нажатия ссылки. Если такой эффект не нужен, можно использовать margin у ссылок, а у активного элемента padding

.menu li {
  margin-right: 20px;
}

.menu li:last-child {
  margin-right: 0;
}

.menu a {
  padding: 8px 10px;
}

Добавляем отступ справа от логотипа в 30 пикселей. В сумме с левым padding в 10 пикселей, который задан у невидимой плашки пункта меню, будет 40:

.logo {
  margin-right: 30px;
}

Добавляем стили плашки активного пункта меню. Тут можно пойти разными путями: поставить класс active у li или у самого элемента с плашкой. Мы пойдём вторым путём. Подразумеваем, что внутри li находится либо ссылка, либо какой‑нибудь элемент с классом active:

.menu a,
.menu .active {  
  display: block;
  padding: 8px 10px;
}

.menu .active {
  color: #fff;
  background-color: #ff3d00;
  border-radius: 8px;
}

Стилизуем ссылки:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}

.menu a,
.menu .active {
  display: block;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .27em;
}

.menu a {
  color: #000;
  text-decoration: none;
}

Теперь приведём в порядок номер телефона:

.tel {
  font-size: 20px;
  line-height: 24px;
}

.tel a {
  color: #000;
  text-decoration: none;
}

Всё отлично, кроме одной вещи —  базовые линии текста меню и номера телефона не совпадают из‑за разной высоты блоков:

Опустим меню на пару пикселей, чтобы совпадали:

.menu ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 2px 0 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  list-style: none;
}

В блоке menu у нас нет ничего, кроме самого списка ul. Можно избавиться от лишнего div и дать класс menu сразу списку. Но мне больше нравится вариант заменить div.menu на nav.menu, так будет семантичнее.

С логотипом и телефоном примерно та же история, но ссылки — строчные элементы и ставить их рядом с блочными не стоит. Поэтому оставим обёртки логотипа и телефона как есть.

Мы пока не выбрали и никак не настроили шрифты. В следующем совете разберём разные варианты подключения своих шрифтов к странице.

Итоговый результат можно посмотреть на Кодпене.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы