23.7. fejezet: CSS alapismeretek – Navigációs eszköztár
Minden weblapnál kiemelten fontos a jó navigálás. Ehhez elengedhetetlen egy korrektül működő navigációs panel vagy eszköztár. A legtöbb weboldal ezt változó színű vagy hátterű panellel oldja meg. Alapvetően a navigációs eszköztár egy lista a lehetséges linkekről. Példa legyen a következő:
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
Első lépésként vegyük ki a listából az egyes elemek előtt pontokat, illetve a bekezdést! Példa:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Második lépésként alakítsuk függőleges sávvá a linkgyűjteményünket! Példa:
li a {
display: block;
width: 120px;
}
Megjegyzés: a width: 120px segítségével az egész terület kattintható lesz, nem csupán a szöveg!
A teljes példa egybeszerkesztve: (htmlpelda47.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 120px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
<p>A háttérszín csupán a kattintható területet láttatja.</p>
</body>
</html>
Most némi változtatással érjük el, hogy az egér alatti link háttérszíne megváltozzon. Példa:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Itt jön a szín változtatása! */
li a:hover {
background-color: #555;
color: white;
}
Ezt még fűszerezhetjük azzal is, hogy a linket tartalmazó szöveget a rendelkezésre álló hely közepére tesszük. Példa:
li {
text-align: center;
}
Íme egy kicsit összetettebb példa, amelyben egy függőleges, fix helyzetű navigációs eszköztárat helyezünk el:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* teljes magasság */
position: fixed; /* fix helyzet */
overflow: auto; /* Görgetés engedélyezése, ha túl nagy a tartalom. */
}
Megjegyzés: ez a kis képernyős mobil eszközökön nem biztos, hogy működik!
A másik gyakran alkalmazott helyzet a vízszintes navigációs eszköztár. Két alapvető módszer van a létrehozására: inline, illetve floating listaelemek.
Nézzünk most egy teljes HTML-kódot a vízszintes navigációs mintára (az előző elemekkel):
(htmlpelda48.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://tferi.hu/">A szerző honlapja</a></li>
</ul>
</body>
</html>
Jól látható, hogy itt a legegyszerűbb módon vannak felsorolva a linkek, simán egymás után. Őszintén szólva "fapados" az elrendezés.
Ha egy kicsit módosítunk, akkor már szebb lehet az eredmény:
li {
float: left;
}
a {
display: block;
padding: 10px;
background-color: #dddddd;
}
Itt már minden elem szélessége egyforma, ráadásul az elemeknek van háttérszíne is.
Megjegyzés: ha az ul elemhez adjuk a háttérszínt, akkor az egész navigációs panelnek egyforma lesz a háttérszíne.
Most következzen egy összetett teljes HTML-kód, melyben egy színváltó hátterű linkek vannak:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.google.hu">Google</a></li>
<li><a href="https://www.microsoft.com/hu-hu/">Microsoft</a></li>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li style="float:right" ><a href="https://tferi.hu/" >A szerző honlapja</a></li>
</ul>
</body>
</html>
Megjegyzés: a fenti példában a 4. link jobbra van rendezve, így egy további lehetőség is adott.
Ötlet: érdemes az egyes elemekhez egy kiemelő színt rendelni, mellyel pl. a jobb oldalon más színű csíkot húzunk. Példa:
li {
border-right: 1px solid #bbb;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_navbar.asp
(További példákkal.)