loader

Искать шаблоны в нашем каталоге

8 вариантов пагинации (нумерации страниц) для Вашего сайта
  • 29.11.2018
  • 227

8 вариантов пагинации (нумерации страниц) для Вашего сайта

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

Wordpress Templates

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

Простые и интуитивно понятные эффекты при наведения

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

Live пагинация

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

"Ползунок"

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

Пусть Йети делает всю работу

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

Для мобильный экранов

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

Нет необходимости в номерах

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

Для тачпадов

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

Бесконечная прокрутка

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

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

Astar - колоритный интернет магазин одежды

Astar - колоритный интернет магазин одежды

Полностью готовый шаблон и дизайн для интернет-магазина одежды и ..

0 руб.

Atomic - Бесплатный универсальный бизнес шаблон

Atomic - Бесплатный универсальный бизнес шаблон

Красивый, продуманный шаблон для любых бизнес идей..

0 руб.

Похожие статьи

06.10.2018 243

10 классных эффектов при наведении (JS&CSS3)

Продвинутые эффекты при наведении для картинок и фотографий на Вашем сайте

Читать далее...

20.10.2018 260

10 удивительных CSS и HTML эффектов в ретро стиле

Нынешняя одержимость всем, что берет истоки из недавнего прошлого, очевидна. Ретро можно...

Читать далее...