Navigační lišty W3.CSS


Horizontální:

Domov Odkaz 1

Domov Odkaz 1

Domov Odkaz 1 Text

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":

Domov Odkaz 1

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:

Domov Odkaz 1

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:

Domov Odkaz 1

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:

Domov Odkaz 1 odkaz 2

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.