آموزش صفحه بندی در CSS

در این مقاله، یاد می گیرید که چگونه با استفاده از CSS، یک صفحه بندی واکنشگرا را ایجاد کنید. اگر یک سایت دارید که صفحات زیادی دارد، ممکن است بخواهید در هر صفحه از آن، یک صفحه بندی(pagination) ایجاد کنید. این صفحه معمولاً یک سری لینک است که در داخل یک لیست نامنظم(<ul>) بسته بندی شده اند. هر لینک، نشان دهنده ی شماره ی یک صفحه ی منحصر به فرد می باشد. علاوه بر این، در یک صفحه بندی، دکمه های قبل و بعد نیز وجود دارند:

.pagination {
  display: flex;
  justify-content: center;
  list-style: none; /* حذف دایره های لیست */
  padding: 0px;
}

.pagination li a {
  display: block; /* let links fill the list item */
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid gray;
  color: black;
  margin: 0 4px;
  border-radius: 5px; /* گرد کردن گوشه ها */
}

توضیح مثال بالا:

ابتدا در کلاس pagination. موارد زیر را تنظیم می کنیم:

display: flex; : برای مرتب کردن شماره های صفحه به صورت افقی.

justify-content: center; : برای وسط چین کردن آنها.

list-style: none; : برای حذف دایره های لیست ها.

بقیه ی استایل ها، به عناصر <a> اعمال می شوند که در داخل عناصر <li> قرار دارند؛ برای اینکه ظاهر اعداد صفحه را تنظیم کنند. 

صفحه بندی با استفاده از کلاس active.

برای مشخص کردن اینکه کاربر در کدام صفحه از صفحه بندی قرار دارد، می توانیم با استفاده از کلاس active. صفحه ی فعال فعلی را رنگی(Highlight) کنیم:

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

غیرفعال کردن دکمه های صفحه بندی

اگر کاربر در حال حاضر در صفحه ی آخر قرار داشته باشد، دکمه ی "بعدی یا next " باید غیرفعال شود. در مثال زیر، ما یک کلاس به نام disabled. ایجاد کرده ایم که ویژگی های color و cursor و pointer-events را تنظیم می کند تا دکمه ی "بعدی" غیرفعال شود. 

.pagination li a.disabled {
  color: #dddddd;
  cursor: not-allowed;
  pointer-events: none;
}

صفحه بندی با افکت Hover

با استفاده از سلکتور :hover می توانیم  کاری کنیم که وقتی که کاربر ماوس خود را روی هر دکمه می برد، رنگ پس زمینه ی آن عوض شود:

.pagination li a:hover:not(.active) {
  background-color: lightgray;
}

استفاده از افکت Transition روی دکمه ی Hover شده

برای ایجاد یک افکت transition روی دکمه ی hover شده، ویژگی transition را به لینک های صفحه اعمال کنید:

.pagination li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid gray;
  color: black;
  margin: 0 4px;
  border-radius: 5px;
  transition: background-color 1s;
}

صفحه بندی مسیر سایت(breadcrumb)

یک نوع دیگر از صفحه بندی نیز وجود دارد، که به آن مسیر سایت(breadcrumb) گفته می شود:

ul.breadcrumb {
  padding: 8px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

منبع: https://www.w3schools.com/css