Шаблон кнопок предыдущей и следующей статьи при помощи Flexbox

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

Существует множество способов создать затягивающий контент и сервис, но возможно самый надежный – это ссылки на сопутствующие страницы. В случае с сайтом такие ссылки размещаются в трех местах: панель в верхней части страницы, релевантные ссылки по основному тексту страницы, а также меню «предыдущая – следующая статья» в нижней части страницы, которое направляет пользователя по логическому продолжению после прочтения текущей статьи. На сайте The New Code шаблон предыдущей и следующей статьи реализован через flexbox.

Механизм

Не у всех статей на The New Code есть логические связи со следующей и предыдущей статьей: к примеру, у первой статьи из списка для чтения будет следующая, но не будет предыдущей, а у последней будет предыдущая, но не будет следующей. Модуль навигации должен адаптироваться под такие условия, сохраняя пространственную связь с пользователем: следующая статья всегда находится справа, а предыдущая – слева.

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

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

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

Модуль навигации очищается, чтобы ему ничего не мешало:

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

У ссылок также прописан класс flex, то есть ссылкам задается свойство display: flexbox. Код ниже делает так, чтобы ссылки занимали одинаковое горизонтальное пространство и были выровнены по центру:

Свойство justify-content: flex-end означает, что ссылка «следующая статья» всегда будет появляться в конце доступного пространства. У ссылок общие стили, которые также относятся и к основному тексту:

Размер тегов span задан, а изображения внутри них переделаны в кружки при помощи свойства border-radius:

Названия статей отделены от изображений с помощью margin’а с соответствующей стороны. Текст правой ссылки по умолчанию выравнивается по левому краю, нам нужно поменять выравнивание на противоположное:

Стрелки в обе стороны генерируются при помощи псевдоклассов:

Если нет ссылки на следующую статью, появится ссылка на предыдущую. Если нет предыдущей, справа появится ссылка на следующую статью.

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

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: