Оформлення пагінації сторінок за допомогою CSS

Перемикачі сторінок - засіб, який допоможе вашим користувачам з легкістю подорожувати сайтом. Гідною альтернативою є нескінченна прокрутка, однак у неї теж є як свої плюси, так і мінуси. Фреймворки, на кшталт Bootstrap, мають потужні вбудовані засоби для організації перемикання сторінок, але:

1. Не всі використовують фреймворки, або використовують їх не у всіх проектах;
2. Сніппет, який розглядається в цій статті є легковагим і простим у використанні;

Побудова структури

Відразу ж можете подивитись на демо та завантажити сирцеві файли:

• Демо
• Завантажити

Структура HTML документа така ж, як і більшості прикладів, де реалізується перемикання сторінок:

<nav role="navigation">
	<ul class="cd-pagination no-space">
		<li class="button"><a href="#0">Prev</a></li>
		<li><a href="#0">1</a></li>
		<li><a href="#0">2</a></li>
		<li><a class="current" href="#0">3</a></li>
		<li><a href="#0">4</a></li>
		<li><span>...</span></li>
		<li><a href="#0">20</a></li>
		<li class="button"><a href="#0">Next</a></li>
	</ul>
</nav> 

Додамо стилю

Найпростіший спосіб кастомізації теми - використання препроцесорів типу SASS, де нам на допомогу прийдуть змінні. Ось частина _variables.scss файлу:

// кольори
 
$color-1: #2E4057; // Pickled Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White
 
// шрифти 
 
$primary-font: 'PT Sans', sans-serif;
 
// border-radius
 
$border-radius: .25em;

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

елементу, .cd-pagination є основним, тому обов'язковий для роботи. Найпростіший спосіб з'ясувати, для чого потрібен кожен клас, - заглянути в styles.css або запустити демо, яке йде разом зі сніппетом. Ось фрагмент файлу стилів:

/* -------------------------------- 
 
користувальницькі значки - налаштування маленької стрілки всередині кнопки next і prev 
 
-------------------------------- */
 
.cd-pagination.custom-icons .button a {
  position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
  padding-left: 2.4em;
}
.cd-pagination.custom-icons .button:last-of-type a {
  padding-right: 2.4em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
  content: '';
  position: absolute;
  display: inline-block;
  /* розмір значків */
  width: 16px;
  height: 16px;
  top: 50%;
  /* margin-top = icon height/2 */
  margin-top: -8px;
  background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
  left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
  right: .8em;
  transform: rotate(180deg);

Невеличкі зауваження

• На пристроях з маленьким екраном ми видаляємо посилання з номерами сторінок і залишаємо тільки кнопки "вперед" і "назад";
• Клас .disabled додається до посилання (елементу ), який з тих чи інших причин недоступний.
• Клас .current - для підсвічування елемента, який вказує на поточну сторінку.
• Клас .animated-buttons працює тільки спільно з .custom-icons. Крім того, текст всередині повинен бути обгорнутий в .

Як прибрати відстань між inline-block елементами

Ось невеликий трюк. Коли ви для того, щоб розташувати елементи горизонтально відносно один одного, застосовуєте до них властивість display: inline-block, між ними утворюється відступ, який не прибирається за допомогою margin: 0; Що можна зробити:

• Встановити цим елементам негативний відступ (сам я не прихильник цього рішення)
• Пустити їх у вільне плавання, додавши, наприклад властивість float: left. Не забудьте застосувати clearfix до батьківського елементу.
• Видалити закриваючий тег . Можливо це звучить безглуздо, але це працює, подивіться на приклад:

</i></a><i><nav role="navigation"><a>
	</a><ul class="cd-pagination no-space move-buttons custom-icons"><a>
		</a><li class="button"><a></a><a href="#0">Prev</a>
		</li><li><a href="#0">1</a>
		</li><li><a href="#0">2</a>
		</li><li><a class="current" href="#0">3</a>
		</li><li><a href="#0">4</a>
		</li><li><span>...</span>
		</li><li><a href="#0">20</a>
		</li><li class="button"><a href="#0">Next</a>
	</li></ul>
</nav> 

• Демо
• Завантажити