Horizontální navigační panel CSS
Horizontální navigační lišta
Vodorovný navigační panel lze vytvořit dvěma způsoby. Použití vložených nebo plovoucích položek seznamu.
Vložený seznam položek
Jedním ze způsobů, jak vytvořit vodorovný navigační panel, je kromě „standardního“ kódu z předchozí stránky zadat prvky <li> jako vložené:
Příklad
li
{
display: inline;
}
Vysvětlený příklad:
display: inline;- Ve výchozím nastavení jsou prvky <li> blokové prvky. Zde odstraníme zalomení řádků před a za každou položkou seznamu, abychom je zobrazili na jednom řádku
Plovoucí seznam položek
Dalším způsobem, jak vytvořit vodorovný navigační panel, je plovoucí prvky <li> a určení rozvržení pro navigační odkazy:
Příklad
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Vysvětlený příklad:
float: left;- Použijte float k tomu, aby prvky bloku plavaly vedle sebedisplay: block;- Umožňuje nám zadat výplň (a výšku, šířku, okraje atd., pokud chcete)padding: 8px;- Mezi každým prvkem <a> určete nějakou výplň, aby vypadaly dobřebackground-color: #dddddd;- Ke každému prvku <a> přidejte šedou barvu pozadí
Tip: Pokud chcete barvu pozadí v plné šířce, přidejte barvu pozadí do <ul> namísto každého prvku <a>:
Příklad
ul
{
background-color: #dddddd;
}
Příklady horizontální navigační lišty
Vytvořte základní vodorovný navigační panel s tmavou barvou pozadí a změňte barvu pozadí odkazů, když na ně uživatel přejede myší:
Příklad
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Aktivní/aktuální navigační odkaz
Přidejte k aktuálnímu odkazu „aktivní“ třídu, aby uživatel věděl, na které stránce se nachází:
Příklad
.active {
background-color: #04AA6D;
}
Odkazy zarovnat vpravo
Odkazy zarovnejte doprava tak, že položky seznamu přesunete doprava ( float:right;):
Příklad
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Hraniční děliče
Přidejte border-rightvlastnost do <li> a vytvořte oddělovače odkazů:
Příklad
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Pevná navigační lišta
Zajistěte, aby navigační panel zůstal v horní nebo dolní části stránky, i když uživatel stránku posouvá:
Pevná horní část
ul {
position: fixed;
top: 0;
width: 100%;
}
Pevné dno
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Poznámka: Pevná poloha nemusí na mobilních zařízeních správně fungovat.
Šedá horizontální navigační lišta
Příklad šedého vodorovného navigačního panelu s tenkým šedým okrajem:
Příklad
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Sticky Navbar
Přidáním position: sticky;do <ul> vytvoříte pevný navigační panel.
Lepivý prvek přepíná mezi relativním a pevným v závislosti na poloze posouvání. Je umístěn relativně, dokud není ve výřezu splněna daná pozice offsetu - pak se „přilepí“ na místo (jako position:fixed).
Příklad
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Poznámka: Internet Explorer nepodporuje pevné umístění. Safari vyžaduje předponu -webkit- (viz příklad výše). Musíte také zadat alespoň jedno z top, right, bottomnebo , leftaby fungovalo lepivé umístění.
Další příklady
Responzivní Topnav
Jak používat dotazy na média CSS k vytvoření responzivní horní navigace.
Responzivní Sidenav
Jak používat dotazy na média CSS k vytvoření responzivní boční navigace.
Rozbalovací navigační lišta
Jak přidat rozbalovací nabídku do navigační lišty.
Slyšeli jste někdy o W3Schools Spaces ? Zde si můžete vytvořit svůj web od začátku nebo použít šablonu a hostovat jej zdarma.
Začněte zdarma ❯* není vyžadována žádná kreditní karta