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:

CSS Oldalszámozás

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="#">&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>

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="#">&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>

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.