Demo: Baruri de navigare
Vertical
Bare de navigare
Având ușor de utilizat de navigare este importantă pentru orice site web.
Cu CSS puteți transforma meniuri HTML plictisitoare in bare bune cu aspect de navigare.
Bara de navigare = Lista de Link-uri
Bara de navigare are nevoie de HTML standard, ca bază.
În exemplele noastre vom construi bara de navigare dintr-o listă standard HTML.
Bara de navigare este de fapt o listă de link - uri, astfel încât folosind <ul> și <li> elemente are sens perfect:
Exemplu
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Încearcă - l singur » Acum să elimine gloanțele și marjele și padding din listă:
Exemplu explicat:
-
list-style-type: none;- Elimină gloanțele. Bara de navigare nu are nevoie de markeri listă - Setare
margin: 0;șipadding: 0;pentru a elimina setările implicite ale browserului
Codul din exemplul de mai sus este codul standard utilizat în ambele bare de navigare verticale și orizontale.
Bara de navigare verticală
Pentru a construi o bară de navigare pe verticală, puteți stilul <a> elementele din interiorul listei, în plus față de codul de mai sus:
Exemplu explicat:
-
display: block;- Afișarea link - urile ca elemente bloc face ca întreaga zonă de link - ul se poate da clic (not just the text) , și ne permite să specificați width (and padding, margin, height , etc. if you want) -
width: 60px;- elemente ale blocului ocupă întreaga lățime disponibile în mod implicit. Dorim să specificați o lățime de 60 de pixeli
Puteți seta , de asemenea , lățimea de <ul> , și se îndepărtează lățimea <a> , deoarece acestea vor dura până pe întreaga lățime disponibilă atunci când sunt afișate ca elemente ale blocului. Acest lucru va produce același rezultat ca și exemplul anterior:
Exemplu
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Încearcă - l singur » Exemple verticale Bara de navigare
Crearea unei bare de bază de navigare pe verticală, cu o culoare de fundal gri și de a schimba culoarea de fundal a link-urile atunci când utilizatorul deplasează mouse-ul peste ele:
Exemplu
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Încearcă - l singur » Activ / Curent de navigare Link
Adăugați un "active" de clasă la link - ul de curent pentru a permite utilizatorului știu ce pagină de el / ea este pe:
Centrul Link-uri & chenare
Adăugați text-align:center pentru a <li> sau <a> pentru a centra link - urile.
Adăugați border proprietatea <ul> adăugați un chenar în jurul navbar. Dacă doriți , de asemenea , în interiorul frontierelor navbar, se adaugă o border-bottom la toate <li> elemente, cu excepția ultima:
Exemplu
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Încearcă - l singur » Full-înălțime fixă verticală Navbar
Creați un full-înălțime, "sticky" de navigare laterală:
Exemplu
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 */
} Încearcă - l singur » Notă: Acest exemplu s - ar putea să nu funcționeze corespunzător pe dispozitive mobile.
Bara de navigare orizontală
Există două moduri de a crea o bară de navigare orizontală. Folosind inline sau floating elemente din listă.
Listă inline Articole
O modalitate de a construi o bară de navigare orizontală este de a specifica <li> elemente ca în linie, în plus față de "standard" codul de mai sus:
Exemplu explicat:
-
display: inline;- În mod implicit, <li> elemente sunt elemente ale blocului. Aici, vom elimina linia rupe înainte și după fiecare element din listă, pentru a le afișa pe o singură linie
Plutitoare Elementele de listă
O altă modalitate de a crea o bară de navigare orizontală este să plutească <li> elemente, și specificați un aspect pentru link - urile de navigare:
Exemplu
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Încearcă - l singur » Exemplu explicat:
-
float: left;- utilizarea float pentru a obține elemente de bloc să alunece unul lângă altul -
display: block;- Afișarea link - urile ca elemente bloc face ca întreaga zonă de link - ul se poate da clic (not just the text) , și ne permite să specificați padding (și height, width, margins , etc , dacă doriți) -
padding: 8px;- Din moment ce elemente ale blocului de dura până pe întreaga lățime disponibile, acestea nu pot pluti unul lângă altul. Prin urmare, specificați unele padding pentru a le face să arate bine -
background-color: #dddddd;debackground-color: #dddddd;- Adăugați un gri culoare de fundal pentru fiecare element
Sfat: Adăugați culoare de fundal la <ul> în locul fiecărui <a> element de dacă doriți o culoare full-lățime de fundal:
Exemple Bara de navigare orizontală
Crearea unei bare de navigare de bază orizontală, cu o culoare de fundal întunecat și de a schimba culoarea de fundal a link-urile atunci când utilizatorul deplasează mouse-ul peste ele:
Exemplu
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Încearcă - l singur » Activ / Curent de navigare Link
Adăugați un "active" de clasă la link - ul de curent pentru a permite utilizatorului știu ce pagină de el / ea este pe:
Link-uri dreapta Aliniere
Link - uri dreapta Aliniere de plutitoare elementele listei spre dreapta ( float:right; ) :
Exemplu
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Încearcă - l singur » Divizoare de frontieră
Adăugați border-right de proprietate la <li> pentru a crea separatoare de legătură:
Exemplu
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Încearcă - l singur » Bara de navigare fix
Asigurați-vă șederea bara de navigare din partea de sus sau de jos a paginii, chiar și atunci când utilizatorul derulează pagina:
Notă: Aceste exemple s - ar putea să nu funcționeze corespunzător pe dispozitive mobile.
Gri orizontală Navbar
Un exemplu de o bară gri navigare orizontală cu o margine gri subțire:
Exemplu
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Încearcă - l singur » 
Mai multe exemple
Topnav receptivă
Cum să utilizați interogări media CSS3 pentru a crea o navigare superioară receptiv.
Sidenav receptivă
Cum să utilizați interogări media CSS3 pentru a crea o navigare laterală receptiv.
dropdown Navbar
Cum de a adăuga un meniu vertical în interiorul unei bare de navigare.