Vertikální navigační panel CSS
Vertikální navigační lišta
Chcete-li vytvořit svislý navigační panel, můžete kromě kódu z předchozí stránky upravit styl prvků <a> v seznamu:
Příklad
li a
{
display: block;
width: 60px;
}
Vysvětlený příklad:
display: block;- Zobrazení odkazů jako blokových prvků umožňuje kliknout na celou oblast odkazu (nejen na text) a umožňuje nám určit šířku (a výplň, okraj, výšku atd., pokud chcete)width: 60px;- Prvky bloku zabírají celou šířku, která je standardně dostupná. Chceme zadat šířku 60 pixelů
Můžete také nastavit šířku <ul> a odstranit šířku <a>, protože při zobrazení jako prvky bloku zaberou celou dostupnou šířku. Výsledkem bude stejný výsledek jako v předchozím příkladu:
Příklad
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Příklady vertikálního navigačního panelu
Vytvořte základní vertikální navigační panel s šedou 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;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
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;
color: white;
}
Vycentrovat odkazy a přidat ohraničení
Chcete-li odkazy vycentrovat, přidejte text-align:centerdo <li> nebo <a>.
Přidejte bordervlastnost do <ul> přidejte ohraničení kolem navigační lišty. Pokud chcete ohraničení také uvnitř navigační lišty, přidejte a border-bottomke všem prvkům <li> kromě posledního:
Příklad
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Pevná vertikální navigační lišta v plné výšce
Vytvořte „lepící“ boční navigaci v plné výšce:
Příklad
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Poznámka: Tento příklad nemusí správně fungovat na mobilních zařízeních.