W3.CSS oferă toate tipurile de bare de navigare:
Vertical:
Orizontală (vertical on small screens) :
Navigare de bază
Clasa W3-navbar creează o bară orizontală de navigare:
Exemplu
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Încearcă - l singur » Navigare colorată Baruri
Exemplu
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Încearcă - l singur » Bordered de navigare Baruri
Exemplu
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Încearcă - l singur » Active / Link curent
Exemplu
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Încearcă - l singur » Link-uri Hoverable
Când mouse-ul peste link-urile din interiorul bara de navigare, culoarea de fundal se va schimba în gri.
Dacă doriți un fundal de culoare diferită pe Hover, utilizați oricare dintre clasele de -W3 hover- de culoare, și , dacă doriți o culoare de text diferit pe Hover, utilizați oricare dintre clasele W3-Hover-text-color:
Exemplu
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Încearcă - l singur » Link-uri aliniat la dreapta
Exemplu
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Încearcă - l singur » Bara de navigare Dimensiune
Schimbă dimensiunea fontului:
Exemplu
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Încearcă - l singur » Schimbarea padding:
Exemplu
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Încearcă - l singur » Personalizați lățimea elementelor listă cu proprietatea CSS lățime (Notă: pe ecrane mai mici, ele se vor transforma la 100%):
Exemplu
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Încearcă - l singur » Bara de navigare cu pictograme
Exemplu
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Încearcă - l singur » Bara de navigare cu Dropdown
Mutați mouse - ul peste "Dropdown" link - ul:
Exemplu
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Încearcă - l singur » Notă: Când meniul drop - down este "open" , link - ul de drop - down devine o culoare de fundal gri pentru a indica faptul că este activă. Pentru a trece peste acest lucru, adăugați o clasă de culoare-W3 hover- atât "dropdown" <li> și <a> :
Sfat: Dacă doriți un simbol drop - down de lângă textul derulant, adăugați o pictogramă adecvată (like ) (like ) (like ) :
Exemplu
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Încearcă - l singur » Utilizați W3-drop - down-clic , dacă preferați să faceți clic pe link - ul vertical în loc de Hover:
Exemplu
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Încearcă - l singur » Bara de navigare fix
Pentru a forța bara de navigare pentru a rămâne la partea de sus sau în partea de jos a paginii, chiar și atunci când utilizatorul derulează pagina, înfășurați un <div> elementul în jurul <ul> și adăugați-W3 superioară sau clasa W3-bottom:
Partea de jos fix
<div class="w3-bottom">
<ul class="w3-navbar">
...
</ul>
</div> Încearcă - l singur » Comasarea bara de navigare
În cazul în care bara de navigare durează prea mult spațiu pe un ecran mic, și nu doriți să-l afișeze pe verticală în mod implicit, ai putea folosi clase de utilitate pentru a ascunde și afișa link-uri specifice din bara de navigare.
In exemplul de mai jos, bara de navigare este înlocuit cu un buton (☰) în colțul din dreapta sus atunci când sunt afișate pe tablete și dispozitive mobile. Când butonul este apăsat, bara de navigare va fi afișată pe verticală:
Topnav
Un alt exemplu de o bară de navigare, este clasa W3-topnav. Este similar cu W3-navbar, cu excepția faptului că se va adăuga o subliniere atunci când treceți peste link - uri, în loc de o culoare de fundal:
Exemplu
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Încearcă - l singur » Exemplu cu fonturi Icoane Awesome
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Încearcă - l singur » partea de navigare
Clasa W3-sidenav creează o bară verticală de navigare:
Du - te la capitolul următor pentru a afla mai multe despre navigarea laterală.