Школа
Веб-разработка

Типовые решения в вёрстке. Как сверстать простой подвал

21 дек 2023
👁 2857   🗩1
Веб-разработка

Типовые решения в вёрстке. Как сверстать простой подвал

21 дек 2023
👁 2857   🗩1
Василий Половнёв
Технический директор бюро
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Сверстаем простой подвал «в линию», который часто встречается в работах студентов Школ бюро. При этом мы не будем стилизовать текст и ссылки, а сосредоточимся на раскладке.

Начнём с разметки:

<footer class="footer">
  <div class="footer-copyright">
    © Айс-бейби, 2023
  </div>
  <nav class="footer-nav">
    <li><a href="/contacts/">Контакты</a></li>
    <li><a href="/delivery/">Доставка</a></li>
    <li><a href="/returns/">Гарантия и возврат</a></li>
  </nav>
  <ul class="footer-social">
    <li><a href="https://t.me/icebaby">Телеграм</a></li>
    <li><a href="https://vk.com/icebaby">ВКонтакте</a></li>
  </ul>
</footer>

Превратим навигацию и список ссылок на соцсети в грид‑контейнер с автоматической раскладкой по колонкам, чтобы ссылки выстроились в строку:

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
}

Уберём маркеры и зададим отступы между элементами списков:

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
  column-gap: 18px; /* Задаём межколонник в 18 пк */
  list-style: none;
}

Поднимемся на уровень выше и зададим раскладку для подвала целиком:

.footer {
  display: grid;
  grid-template-columns: max-content max-content 1fr; /* Пусть копирайты и навигация займут минимум места, а соцсети — всё оставшееся */
  column-gap: 36px;
}

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 18px;
  list-style: none;
}

В колонке с соцсетями осталось свободное место, элементы прижались к левому краю. Отожмём иконки к правому краю, но только на десктопе:

.footer {
  display: grid;
  grid-auto-columns: max-content max-content 1fr;
  column-gap: 36px;
}

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 18px;
  list-style: none;
}

@media (width >= 961px) {
  .footer-social {
    justify-self: end;
  }
}

Заменим текстовые ссылки на соцсети иконками в СВГ:

<!-- СВГ-спрайт с иконками -->
<svg width="0" height="0" class="hidden">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="telegram">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M48 ... 21.8015Z" fill="black"></path>
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="vk">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 ... 31.8761H25.2555Z" fill="black"></path>
  </symbol>
</svg>
<!-- ... -->
<ul class="footer-social">
  <li>
    <a href="https://t.me/icebaby">
      <svg class="icon" width="24" height="24"><use xlink:href="#telegram"></use></svg>
    </a>
  </li>
  <li>
    <a href="https://vk.com/icebaby">
      <svg class="icon" width="24" height="24"><use xlink:href="#vk"></use></svg>
    </a>
  </li>
</ul>
Иконки — social‑icons на Гитхабе, спрайты — SVGSprit.es

Уменьшим отступ между иконками:

.footer {
  display: grid;
  grid-auto-columns: max-content max-content 1fr;
  column-gap: 36px;
}

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 18px;
  list-style: none;
}

.footer-social {
  column-gap: 9px;
}

@media (width >= 961px) {
  .footer-social {
    justify-self: end;
  }
}

Если пунктов в меню станет больше, подвал может превратиться в «гантелю» — слева копирайты, справа соцсети, а навигация болтается между ними:

В таком случае стоит прижать навигацию к копирайту, а от соцсетей отступить:

@media (width >= 961px) {
  .footer-nav {
    margin-left: -18px;
  }
  
  .footer-social {
    justify-self: end;
  }
}

Добавим мобильную версию:

.footer {
  display: grid;
  grid-auto-columns: max-content max-content 1fr;
  column-gap: 36px;
}

.footer-nav,
.footer-social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 18px;
  list-style: none;
}

.footer-social {
  column-gap: 9px;
}

@media (width >= 961px) {
  .footer-nav {
    margin-left: -18px;
  }
  
  .footer-social {
    justify-self: end;
  }
}

@media (width <= 960px) {
  .footer {
    grid-template-columns: 1fr; /* Меняем сетку, раскладывая всё в одну колонку и N рядов по содержимому */
    grid-auto-rows: min-content;
    row-gap: 1em;
  }
  
  .footer-nav {
    display: block; /* Выключаем раскладку гридами */
  }        
}

Результат целиком:

Порастягивайте окно и посмотрите, как меняется вёрстка и расположение элементов

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

Веб‑разработка
Полезно
 13
13
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Рекомендую любые иконки (в вашем случае иконки социальных сетей) снабжать ARIA‑атрибутами, чтобы вспомогательные технологии могли получить альтернативное текстовое представление. Без них ссылки будут безымянными.

<svg role="img" aria-label="Телеграм"...>

В качестве альтернативы: можно текст для ссылки поместить в <span> и скрыть его через технику visually-hidden.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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