24.4. fejezet: Oldalszámozás
Ha több oldalt (vagy a linkjét) szeretnénk egyszerre mutatni, akkor annak legegyszerűbb módja az oldalak számozása. Ezt mutatja az alábbi kép:
Itt az egyes oldalakat külön-külön számozzuk, majd pl. a nyitóoldalra tesszük ezt a lapozható oldalszámlálót. Forráskód: (htmlpelda57.html)
<!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>Oldalak</h2>
<div class="pagination">
<a href="#">«</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="#">»</a>
</div>
</body>
</html>
Ha az előbbi verziót kicsit szépíteni akarjuk, akkor érdemes kiemelni az aktív elemet, azaz más színnel megjelölni a hátterét. Ehhez a .active osztályt érdemes használni. Az aktuális oldal a 2-es számú, míg az egeret bármelyik másik oldal száma fölé az adott oldal héttere szürkére vált. Íme a forráskód: (htmlpelda58.html)
<!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="#">«</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>
</body>
</html>
További díszítő elem lehet a sarkak lekerekítése (border-radius: 5px;), illetve az átmeneti idő szabályozása (transition: background-color .3s;). Bár ezekkel óvatosan kell bánni, mivel a túl sok díszítő elem már visszás hatást kelthet!
Viszont érdemes meggondolni az oldalszámok bekeretezését a megszokott módon (border: 1px solid #ddd;), mivel az gyakran nagy segítség lehet a megfelelően gyors navigáláshoz. További jó ötlet a számok közötti üres helyek meghagyása:
.pagination a {
margin: 0 4px; /* 0 a tetejének és az aljának. 4 képpont az oldalsó helynek. */
}
A fejezet leghitelesebb forrása (további ötletekkel): https://www.w3schools.com/css/css3_pagination.asp
Ezzel a CSS-sorozat véget ért. Folytatás: HTML5.
- << Előző
- Következő