Khi một trang web bạn có nhiều sản phẩm hay bài viết thì việc phân trang là một nhiệm vụ rất quan trọng. Nó làm tăng tốc độ tải trang cũng như giúp người dùng có thể dễ dàng theo dõi nội dung của bạn trên trang web. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu cách thiết kế pagination bằng HTML, CSS và Javascript cho website nhé!
Cách tạo Pagination Cơ Bản Bằng HTML CSS
Đầu tiên chúng ta sẽ đi vào tìm hiểu cách tạo pagination cơ bản cho trang web bằng HTML và CSS nhé!
HTML
<div class="pagination">
<a href="#">«</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="#">»</a>
</div>
Class active có nhiệm vụ giúp người dùng biết được mình đang ở trang nào thông qua cách chúng ta thiết lập màu cho nó. Và thường thì color của class này sẽ khác so với các số trang còn lại. Để hiểu rõ hơn bạn xem đoạn mã CSS sau nhé!
CSS
/* thiết lập style cho thẻ a */
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* thiết lập style cho class active */
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not(.active) {
background-color: #ddd;
}
Và kết quả cuối cùng bạn xem ở dưới đây nhé:
See the Pen Pagination cơ bản by haycuoilennao19 (@haycuoilennao19) on CodePen.
Cách tạo Pagination Border Bằng HTML CSS
Như bạn thấy ở ví dụ trên thì class active của chúng ta có hình chữ nhật. Trong phần này mình sẽ giới thiệu đến bạn cách tạo pagination với hình tròn nhé!
HTML
<div class="pagination">
<a href="#">«</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="#">»</a>
</div>
CSS
/* thiết lập style cho thẻ a */
.pagination a {
color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
}
/* thiết lập style cho class active */
.pagination a.active {
background-color: dodgerblue;
color: white;
/*Thiết kế hình tròn với CSS*/
border-radius: 50%;
}
/* thêm màu nền khi người dùng hover vào class không active */
.pagination a:hover:not(.active) {
background-color: #ddd;
/*Thiết kế hình tròn với CSS*/
border-radius: 50%;
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé:
See the Pen pagination với hình tròn by haycuoilennao19 (@haycuoilennao19) on CodePen.
Cách tạo Pagination Với Thẻ li
Phần này chúng ta sẽ đi vào tìm hiểu cách tạo phần trang từ thẻ li nhé!
HTML
<div class="flex">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="bar"></div>
</ul>
</div>
CSS
/*thiết lập style cho màu sắc, vị trí, độ cao... cho pagination*/
.flex {
width: 400px;
height: 80px;
line-height: 80px;
background-color: #eeeeee;
position: absolute;
top: 15%;
left: 40%;
margin: -25px 0 0 -150px;
}
/*Thiết lập style cho thẻ ul*/
.flex ul {
display: flex;
padding: 0;
margin: 0;
box-shadow: 0 10px 20px 0 #cccccc;
}
/*thiết lập style cho thẻ li*/
.flex ul li {
flex: 1;
list-style: none;
text-align: center;
position: relative;
font-size: 20px;
font-weight: bold;
transition: 0.3s ease;
cursor: pointer;
user-select: none;
}
/*tạo hiệu ứng hover cho thẻ li */
.flex ul li:hover {
background-color: rgba(255, 255, 255, 0.25);
color: #65bcc9;
}
/*chuyển đổi vị trí của class bar khi người dùng hover vào các con số*/
.flex ul li:hover:nth-of-type(2) ~ .bar {
left: 20%;
}
.flex ul li:hover:nth-of-type(3) ~ .bar {
left: 40%;
}
.flex ul li:hover:nth-of-type(4) ~ .bar {
left: 60%;
}
.flex ul li:hover:nth-of-type(5) ~ .bar {
left: 80%;
}
/*thiết lập style cho class bar*/
.flex ul .bar {
width: 20%;
background-color: dodgerblue;
height: 5px;
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s ease;
}
Và kết quả cuối cùng bạn xem ở dưới đây nhé:
See the Pen pagination vởi thẻ li by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Dụ Pagination Cho Website
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Pagination Javascript
See the Pen Pacman pagination by Mikael Ainalem (@ainalem) on CodePen.
Tổng Hợp Các Pagination HTML CSS
See the Pen Pagination by Vineeth.TR (@vineethtrv) on CodePen.
Thiết Kế Pagination CSS3 Javascript
See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.
Thiết Kế Pagination CSS
See the Pen Pagination by Rosa (@RRoberts) on CodePen.
Thiết Kế Pagination Với SVG
See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.
Cách Tạo Pagination Jquery
See the Pen Hover and Active Pagination by Doğukan Çavuş (@dgknca) on CodePen.
Thiết Kế CSS Pagination
See the Pen Pagination One by Steven Roberts (@matchboxhero) on CodePen.
Thiết Kế Pagination
See the Pen responsive pagination by Milica (@micadev) on CodePen.
Thiết Lập Hiệu Ứng Animation cho Pagination
See the Pen Spring pagination by Mikael Ainalem (@ainalem) on CodePen.
Thiết Kế Pagination HTML5
See the Pen Pagination with morphing numbers by Mikael Ainalem (@ainalem) on CodePen.
Tạo Hiệu Ứng Pagination Với GSAP
See the Pen Dot Hopper - Pagination by Elliot Geno (@pyrografix) on CodePen.
Cách Tạo Jquery Pagination
See the Pen WebDesignerDepot pagination by Wouter Bles (@wouterbles) on CodePen.
Thiết Kế Responsive Pagination
See the Pen pagination hover animation by Elena Nazarova (@nazarelen) on CodePen.
Hiệu Ứng Hover Cho Pagination
See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.
Thiết Kế Pagination Bằng Jquery
See the Pen Pagination by Kasper Mikiewicz (@Idered) on CodePen.
Tổng Hợp Các Pagination Với SVG
See the Pen SVG Pagination Animation(s) by Adam, Ironclad, Wells (@Adamlwells408) on CodePen.
Thiết Kế Pagination Jquery CSS3
See the Pen Unrealistic Pagination by Tony Banik (@banik) on CodePen.
Thiết Kế Pagination CSS Javascript
See the Pen Pagination : Almost Tabs by Mandy McClausky (@mandynicole) on CodePen.
Cách Tạo Responsive Pagination HTML CSS
See the Pen Responsive Pagination by Tommy Hodgins (@tomhodgins) on CodePen.
Cách Tạo Responsive Pagination Jquery Cho Website
See the Pen Responsive Magic Line Pagination by Ryan Yu (@iamryanyu) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những pagination hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!