Как убрать сдвиг элементов меню при наведении CSS

Быстрое решение

Чтобы предотвратить визуальный "скачок" текста, можно применить оптический трюк с полужирным шрифтом с использованием свойства text-shadow. Этот метод не увеличивает ширину текста, но создаёт эффект выделения.

.hover-bold {
  text-shadow: 0 0 0 transparent; /* Невидим, однако оставляет заметный след */
}

.hover-bold:hover {
  text-shadow: 0 0 1px black; /* Впечатление полужирности, не меняя геометрию */
}

При наведении курсора вы заметите эффект утолщения текста, но его положение останется прежним.

Комплексное решение

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

Оптический обман

Основной идеей является замена реального полужирного начертания, которое меняет ширину текста, на визуально схожий эффект, реализуемый с помощью свойства text-shadow.

Подробнее об этом расскажет наш спикер на видео

Встреча со скрытым

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

.menu-item::after {
  content: attr(data-text);
  visibility: hidden; /* Сейчас неотличим от фона */
  font-weight: bold; /* Но уже "тренирован" для будущего состояния */
}

Подобный метод является более изящным решением, чем корректировка отступов в ответ на изменение состояния элементов.

Переход к inline-block

Если задать элементам свойство display: inline-block;, это дает больше контроля над их шириной и позиционированием без риска смещения текста.

.menu-item {
  display: inline-block; /* Больше управления, меньше неожиданных эффектов */
}

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

Значимость консистентности

Согласованность стилей a:hover и a:focus гарантирует аккуратный визуальный эффект, минимизируя несоответствия в взаимодействии с элементами.

Теорема о "вагонах"

Рассмотрим текст в строке как вагоны поезда, двигающиеся по рельсам:

Обычная строка:    🍞🍞🍞🍞🍞🍞
String при наведении:     🍞🍞🥪🍞🍞🍞

Когда мы заменяем хлеб (🍞) на сэндвич (🥪), наш "путь" несколько искажается. Наша задача — позволить "рельсам" оставаться неподвижными даже при появлении "сэндвичей".

Дополнительные способы защиты

В качестве дополнительных способов защиты вашего макета от смещения элементов существуют:

Микронастройка межбуквенного пространства

Незначительные коррекции letter-spacing при наведении помогают компенсировать незначительное увеличение ширины, вызванное полужирным шрифтом.

jQuery для большего контроля

Мы стараемся достичь желаемого эффекта на самом CSS, но использование jQuery дает больше возможностей скорректировать ширину элементов. Отметим, однако, что следует учитывать возможные ограничения производительности.

Лёгкость "плавания"

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

Игра с отступами

Использование padding-left и padding-right позволяет избежать необходимости фиксации ширины, гарантируя достаточное пространство вокруг текста.

Внимание на Safari

Браузер Safari иногда непредсказуемо интерпретирует свойство text-shadow, что требует специальной коррекции для обеспечения кроссбраузерной совместимости.

Полезные материалы

1. Селектор :hover в CSS — W3Schools — Погрузитесь в мир интерактивности.
2. Полное руководство по Flexbox | CSS-Tricks — Ваш надежный помощник в области гибкой верстки.
3. font-weight — MDN — О весе слов в буквальном смысле.
4. Cumulative Layout Shift (CLS) | web.dev — Избегайте сдвигов в верстке.
5. Борьба с пробелами между элементами с inline-block | CSS-Tricks — Как справиться с пустым пространством – более сложной проблемой.
6. font-size-adjust — MDN — Для точной микронастройки размера шрифта.
7. Разница между margin и padding в CSS — Stack Overflow — Границы и отступы: ключи к пониманию.

Завершение

Помните: даже ниндзя требуют тренировок. 🥷 Если эти решения вам пришлись по душе, не забудьте поставить лайк. Продолжайте совершенствовать свои навыки кодирования, как настоящий ниндзя! 👩‍💻