صفحه بندی (Pagination) در CSS

درسنامه درس 12 از سری CSS پیشرفته

Pagination یا صفحه بندی در CSS

اگر وب سایت شما از نوع فروشگاه های اینترنتی یا وبلاگ ها است که دارای صفحات متعدد اند، صفحه بندی از وظایف اجباری شما است. یک مثال ساده از صفحه بندی در CSS را در کد زیر می بینید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

برای زیباتر کردن این مثال باید کلاسی به نام active. را به صفحه ی فعلی داده و با استفاده از hover: کاری کنیم که با حرکت موس روی این صفحات رنگ پس زمینه شان تغییر کند:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

گرد کردن زوایا

برای ایجاد ظاهری زیباتر می توانید زوایای این صفحات را با استفاده از border-radius  گرد کنید.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از قابلیت transition

شما می توانید با استفاده از قابلیت transition کاری کنید که انیمیشن هایی مانند hover به نرمی هرچه تمام تر اجرا شده و آنی اتفاق نیفتند.

به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {background-color: #ddd;border-radius: 5px;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اضافه کردن حاشیه

اکثر وب سایت های دنیای وب از border برای حاشیه دادن به قسمت صفحه بندی سایت خود استفاده می کنند که امری سلیقه ای است. اگر بخواهیم این کار را با مثال خود بکنیم چیزی جز اضافه کردن border به کدهای CSS نداریم:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اما هنوز هم جای ارتقاء وجود دارد. اگر گوشه های دو علامت « و » را گرد کنیم شکل قسمت صفحه بندی زیباتر می شود:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

صفحات با فاصله

یکی دیگر از استایل های ممکن، ایجاد فاصله بین صفحات در قسمت صفحه بندی است. در چنین حالتی باید از margin استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اندازه ی قسمت صفحه بندی

برای تعیین اندازه ی قسمت صفحه بندی می توان از خاصیت font-size استفاده کرد و به هیچ چیز پیچیده ی دیگری نیاز نیست:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

قرار دادن صفحه بندی در وسط صفحه

برای ترازبندی صفحه بندی باید ابتدا آن را درون یک عنصر نگه دارنده ی دیگر (مانند یک div) قرار دهید و سپس از قابلیت text-align:center استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استایل های دیگر

البته استایل های دیگر صفحه بندی نیز وجود دارند. به طور مثال کد بسیار پیشرفته تری را در زیر می بینید:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  .wrap {
  display: grid;
  place-content: center;
  height: 100vh;
  background: #90CAF9;
}
.wrap .nav {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-shadow: 0 5px 5px -5px rgba(2, 136, 209, 0.15), 0 10px 10px -5px rgba(2, 136, 209, 0.15), 0 15px 15px -5px rgba(2, 136, 209, 0.15), 0 20px 20px -5px rgba(2, 136, 209, 0.15);
}
.wrap .nav__link {
  flex: 1;
  padding: 50px;
  list-style: none;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  transition: 0.5s ease;
  cursor: pointer;
  user-select: none;
}
.wrap .nav__link:hover {
  color: #0288D1;
}
.wrap .nav__link:hover:nth-of-type(2) ~ .nav__bar {
  top: 20%;
}
.wrap .nav__link:hover:nth-of-type(3) ~ .nav__bar {
  top: 40%;
}
.wrap .nav__link:hover:nth-of-type(4) ~ .nav__bar {
  top: 60%;
}
.wrap .nav__link:hover:nth-of-type(5) ~ .nav__bar {
  top: 80%;
}
.wrap .nav__bar {
  top: 0;
  left: 0;
  position: absolute;
  background: #0288D1;
  width: 5px;
  height: 20%;
  transition: 0.35s cubic-bezier(0.32, 1.4, 0.13, 1.4);
}
  </style>
<div class="wrap">
  <ul class="nav"> 
    <li class="nav__link">1</li>
    <li class="nav__link">2</li>
    <li class="nav__link">3</li>
    <li class="nav__link">4</li>
    <li class="nav__link">5</li>
    <div class="nav__bar"></div>
  </ul>
</div>
</body>
</html>

مشاهده ی خروجی در JSBin

یک مثال بسیار زیبای دیگر:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style>
  body {
  margin: 0;
  background: #F6B533;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
}
a {
  text-decoration: none;
  outline: none;
  display: block;
  padding: 20px 0;
  width: 40px;
  text-align: center;
  color: white;
  float: left;
}
div {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 40px;
  overflow: hidden;
  transition: .5s linear;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.line {
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: 10px;
  left: -35px;
  background: white;
  transition: .5s linear .2s;  
}
.left a:nth-child(2):hover ~ .line,
.right a:nth-child(2):hover ~ .line {
  left: 5px; 
}
.left a:nth-child(3):hover ~ .line,
.right a:nth-child(3):hover ~ .line {
  left: 45px; 
}
.left a:nth-child(4):hover ~ .line, 
.right a:nth-child(4):hover ~ .line {
  left: 85px; 
}
nav {
  background: #FCFCFC;
  color: #4D4644;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 600px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  transition: .3s linear;
}
.text {
  display: inline-block;
  letter-spacing: 2px;
  padding: 20px 10px;
  cursor: pointer;
}
nav:hover div {
  background: #D8CDC9;
  opacity: 1;
}
div:hover .prev {
  opacity: 0;
  display: none;
}
div:hover .next {
  display: none;
}
div:hover {
  width: auto;
}
.prev:before {
  content: "\f104";
  font-family: FontAwesome;
}
.next:before {
  content: "\f105";
  font-family: FontAwesome;
}
  </style>
<nav><span class="text">NEXT</span>
  <div class="left">
    <a href="" class="prev"></a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <span class="line"></span>
  </div>
  <div class="right">
    <a href="" class="next"></a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <span class="line"></span>
   </div>
</nav>
</body>
</html>

مشاهده ی خروجی در JSBin

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری CSS پیشرفته توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.