Navigační lišty W3.CSS
Vertikální:
Horizontální:
Třídy navigační lišty W3.CSS
W3.CSS poskytuje následující třídy pro navigační panely:
Třída | Definuje |
---|---|
w3-bar | Horizontální kontejner pro HTML prvky |
w3-bar-blok | Vertikální kontejner pro HTML prvky |
w3-bar-item | Prvky kontejnerové tyče |
w3-sidebar | Svislý postranní panel pro prvky HTML |
w3-mobile | Učiní jakýkoli prvek lišty tak, aby byl mobilní |
w3-dropdown-hover | Pohyblivý rozevírací prvek |
w3-dropdown-click | Rozbalovací prvek, na který lze kliknout (místo umístění kurzoru myši) |
Základní navigace
Třída w3-bar je kontejner pro horizontální zobrazení prvků HTML.
Třída w3-bar-item definuje prvky kontejneru.
Je to perfektní nástroj pro vytváření navigačních panelů:
Příklad
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Responzivní navigace
Třída w3-mobile umožňuje reagovat na všechny prvky lišty (horizontální na velkých obrazovkách a vertikální na malých).
Střední a velké obrazovky:
Malé obrazovky:
Příklad
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Barevné navigační lišty
Pomocí třídy w3-color přidejte barvu do navigačního panelu:
Příklad
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Ohraničené navigační lišty
Použijte třídu w3-border nebo w3-card k přidání ohraničení kolem navigačního panelu nebo k zobrazení jako karty:
Příklad
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Aktivní/aktuální odkaz
Přidejte k odkazu třídu w3-color , abyste jej zvýraznili:
Příklad
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Vznášet se odkazy
Když na tlačítko najedete myší, barva pozadí se změní na šedou.
Pokud chcete jinou barvu pozadí při najetí myší, použijte kteroukoli z tříd barev w3-hover- :
Příklad
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Chcete-li místo toho změnit barvu textu, vypněte výchozí efekt hover s třídou w3-hover-none a přidejte třídu w3-hover-text .
Příklad
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
Věnujte nějaký čas hraní si s různými efekty vznášení:
Příklad
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
Odkazy zarovnané vpravo
Pomocí třídy w3-right na položce seznamu zarovnáte konkrétní odkaz doprava:
Příklad
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Velikost navigační lišty
Pomocí třídy w3-size změňte velikost písma odkazů na navigační liště:
Příklad
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Pomocí třídy w3-padding změňte odsazení každého odkazu v navigační liště:
Příklad
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Poznámka: Místo jednotlivých tlačítek můžete také přidat odsazení do navigační lišty. Pokud to však uděláte, uvědomte si, že odkazy nedostanou při umístění kurzoru úplné odsazení:
Příklad
<div class="w3-bar w3-green w3-padding-16"></div>
Přizpůsobte šířku odkazů pomocí vlastnosti width CSS
( Poznámka : Pomocí w3-mobile převeďte odkazy na 100% šířku na malých obrazovkách):
Příklad
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
Navigační panel s ikonami
Příklad
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Třídy "fa fa" ve výše uvedeném příkladu zobrazují ikony "Font Awesome".
Více o tom, jak zobrazovat ikony, se dozvíte v kapitole Ikony W3.CSS .
Text navigační lišty
Pokud chcete v navigační liště místo tlačítek text, použijte třídu w3-bar-item , abyste získali stejné odsazení jako tlačítka.
Příklad
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Navbar se vstupy a tlačítky
Příklad
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Navigační lišta s rozevíracím seznamem
Přesuňte kurzor myši na odkaz "Rozbalovací nabídka":
Příklad
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Rozbalovací nabídka, na kterou lze kliknout
Použijte w3-dropdown-click , pokud dáváte přednost kliknutí na rozbalovací odkaz namísto umístění kurzoru myši:
Příklad
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Horizontální rozbalovací nabídka
Pokud chcete, aby se rozevírací odkazy zobrazovaly vodorovně, nikoli svisle, odeberte třídu w3-bar-block z rozevíracího kontejneru:
Příklad
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Responzivní navigační panel s responzivním rozevíracím seznamem
Použijte třídu w3-mobile na všech odkazech včetně rozevíracího kontejneru k vytvoření responzivního navigačního panelu s responzivními rozevíracími odkazy.
Změňte velikost okna prohlížeče, abyste viděli efekt:
Příklad
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.