Почему ссылки подвала исчезают на мобильных и как управлять ими для разных языков

Исходное требование сообщает о ссылках, видимых на десктопе и отсутствующих на мобильных, и просит управление одной языковой версией. Причина не установлена. Ниже используется учебный подвал с условными разделами. Реальные клиентские ссылки, контакты и фирменное оформление не копируются.

Сначала составить инвентарь навигации

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

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

Запишите текущие различия между ширинами. Одни пункты могут скрываться CSS, другие отсутствовать в мобильном шаблоне, третьи находиться в закрытой группе без доступной кнопки. Это разные причины. Снимок узкого экрана показывает симптом, но не устанавливает, на каком слое теряется содержание.

Отделить данные от раскладки

Общий набор ссылок должен иметь устойчивые ключи, подписи, адреса и порядок. Десктоп может раскладывать его колонками, мобильный показывать раскрываемыми группами. Не храните две независимые копии одного списка только ради разного CSS. Иначе редактор обновит широкую версию, а узкая останется со старым содержанием.

При этом не все группы обязаны быть одинаковыми по форме. На телефоне можно изменить порядок по согласованному назначению, объединить компактные блоки или раскрывать второстепенное. Важно сохранить доступ к нужным пунктам и понятность структуры. Различие представления не должно незаметно менять адрес назначения или язык ссылки.

Если проект уже использует компонент меню, оцените его пригодность. Не создавайте новый универсальный редактор навигации ради нескольких пунктов. Минимальная модель должна решать текущие данные, локализацию и адаптивность. Повторное использование полезно, когда оно сохраняет правила сайта и не приносит лишние зависимости в простой подвал.

Найти фактическое скрытие

Посмотрите, присутствуют ли пункты в итоговом HTML на узкой ширине. Если они есть, исследуйте правила display, overflow, высоты и позиционирования. Если отсутствуют, проверьте шаблон и данные. Не исправляйте отсутствие данных увеличением высоты контейнера, а CSS-скрытие добавлением дублированного списка поверх старого.

Проверьте промежуточные размеры. Ошибка может появляться не только на телефоне: колонки уже не помещаются, но мобильная группировка ещё не включилась. Длинный перевод или увеличенный текст усиливают проблему. Матрица должна включать диапазон вокруг точки переключения, а не только два удобных размера макета.

Не используйте фиксированную высоту как способ аккуратно обрезать подвал. Она может скрыть последние пункты и оставить их недоступными для касания. Если нужен ограниченный блок, управление раскрытием должно быть явным. Посетитель должен понимать, что есть дополнительные ссылки и как их увидеть, а не случайно обнаруживать их при изменении масштаба.

Сделать раскрытие доступным

У группы нужна настоящая кнопка или подходящий нативный элемент с понятной подписью и состоянием. Кликабельный заголовок без роли плохо сообщает назначение. MDN описывает details и summary как один из вариантов раскрытия дополнительного содержания. Он может подойти для группы подвала, но выбор зависит от существующих компонентов и дизайна.

Проверьте клавиатурное открытие, закрытие и переход по ссылкам. Фокус должен быть видимым. После раскрытия человек не должен терять своё положение в странице. Если используется собственный компонент, состояние и связь кнопки с областью должны соответствовать фактической видимости, а не просто переключать декоративный значок.

Если применён details, помните о булевой природе open: присутствие атрибута означает открытое состояние, строка false не делает его закрытым. Это пример того, почему визуальная логика должна соответствовать семантике HTML. Проверяйте реальное состояние элемента и не полагайтесь на удобное текстовое значение в шаблоне без понимания платформы.

Согласовать поведение при изменении ширины

Пользователь может повернуть устройство или изменить окно. Подвал должен оставаться доступным после перехода из мобильного режима в широкий и обратно. Если JavaScript принудительно закрывает группу, а CSS на десктопе скрывает кнопку открытия, ссылки могут оказаться недоступными. Проверьте первое открытие страницы и смену состояния представления.

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

На широком экране группы могут быть постоянно видимыми, на узком раскрываемыми. Убедитесь, что доступные подписи не становятся ложными после перехода. Кнопка «раскрыть» рядом с уже открытым постоянным списком выглядит неаккуратно и может вводить в заблуждение. Это локальная полировка поведения, не повод менять всю навигацию сайта.

Дать редактору управление нужной локалью

Форма редактирования должна явно показывать язык и область. Если пользователь меняет одну языковую версию, другие не должны перезаписываться из-за общей строки. Разделите общий ключ пункта и локализованные подписи с адресами. При необходимости общий порядок может наследоваться, но это должно быть понятным правилом, а не случайной копией данных.

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

Редактору полезны предпросмотр и ограниченный набор полей: подпись, разрешённый адрес, группа, порядок и видимость. Произвольный HTML всего подвала расширяет риск и усложняет адаптивность. Не позволяйте обычной редакционной правке случайно удалять служебные контейнеры, кнопки раскрытия или связи доступности.

Проверить назначение ссылок

Каждый пункт должен вести на существующую разрешённую страницу нужного типа. Проверяйте конечный ответ и перенаправления, а не только заполненность поля. Относительный URL может разрешаться по-разному на вложенной странице. Согласуйте формат хранения и не пытайтесь угадывать его по наличию знакомого слова в строке.

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

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

Сохранить читаемость длинных переводов

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

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

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

Проверить общий контейнер подвала

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

Проверьте горизонтальную прокрутку, вложенные фиксированные ширины и длинные неразрывные значения. Контактный блок не должен вытеснять навигацию за экран. Если таблица или другой широкий элемент выше ломает ширину страницы, подвал может наследовать неверное поведение. Локализуйте источник переполнения, а не скрывайте его глобальным обрезанием всего документа.

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

Кэш и редактирование проверить штатно

Измените учебную ссылку через предусмотренный интерфейс и получите страницу как обычный посетитель. Авторский предпросмотр может показывать новую редакцию, пока публичный ответ остаётся старым. Проверьте слой сохранения и зависимости. Редактор не должен вручную очищать весь сайт после каждой правки подписи, если автоматическое обновление входит в модель.

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

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

Собрать приёмку по действиям

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

В итоговой заметке оставьте источник данных, правила локализации, область редакторских прав и проверенные ширины. Доработка готова, когда навигация сохраняет назначение на всех целевых экранах и обновляется из понятного места. Само появление скрытого списка после одного CSS-исправления недостаточно без проверки раскрытия, перевода и конечных переходов.

Связанный разбор: Доступность корпоративного сайта: что заложить в дизайн, верстку и формы.

Документация и источники

• MDN: HTML details: Вариант доступного раскрытия группы ссылок на узкой ширине