Navigační karty W3.CSS
Londýn
Londýn je hlavní město Anglie.
Je to nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Navigace s kartami
Navigace na kartách je způsob, jak se pohybovat po webu.
Normálně navigace na kartách používá navigační tlačítka (karty) uspořádaná společně se zvýrazněnou vybranou kartou.
Tento příklad používá prvky se stejným názvem třídy (v našem příkladu „město“) a mění styl mezi display:none a display:block , aby se skryl a zobrazil jiný obsah:
Příklad
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
A několik klikatelných tlačítek pro otevření obsahu na záložkách:
Příklad
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
A JavaScript k provedení práce:
Příklad
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
JavaScript vysvětlen
Funkce openCity() se zavolá, když uživatel klikne na jedno z tlačítek v nabídce.
Funkce skryje všechny prvky s názvem třídy "city" ( display="none" ) a zobrazí prvek s daným názvem města ( display="block" );
Zavíratelné záložky
Londýn
Londýn je hlavní město Anglie.
Chcete-li zavřít kartu, přidejte onclick="this.parentElement.style.display='none'" k prvku uvnitř kontejneru karty:
Příklad
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
Aktivní/Aktuální karta
Chcete-li zvýraznit aktuální kartu/stránku, na které se uživatel nachází, použijte JavaScript a přidejte do aktivního odkazu třídu barev. V níže uvedeném příkladu jsme ke každému odkazu přidali třídu „tablink“. Tímto způsobem je snadné získat všechny odkazy spojené s kartami a přiřadit aktuálnímu odkazu na kartu třídu „w3-red“, aby se zvýraznil:
Příklad
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
Vertikální záložky
Příklad
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Obsah animované karty
K vyblednutí, přiblížení nebo posunutí obsahu karty použijte kteroukoli z tříd w3-animate- :
Příklad
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Galerie obrázků s kartami
Klikněte na obrázek:
Příklad
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Karty v mřížce
Použití karet v rozložení ve třetím sloupci. Všimněte si, že k aktivní kartě přidáme spodní okraj namísto barvy pozadí: