CSS Bară de navigare. Bară orizontală gri. Bară de navigare sticky.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
Bară orizontală gri
Un exemplu de bară de navigare orizontală gri, cu un border subțire gri:
Exemplu:
Sticky Navbar
Adăugați position: sticky; la <ul> pentru a crea sticky navbar.
Un element sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție dată de offset este întâlnită în viewport - apoi se „lipeste”la loc (ca position:fixed).
Exemplu:
Notă: Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai sus). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
Un exemplu de bară de navigare orizontală gri, cu un border subțire gri:
Exemplu:
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
Sticky Navbar
Adăugați position: sticky; la <ul> pentru a crea sticky navbar.
Un element sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție dată de offset este întâlnită în viewport - apoi se „lipeste”la loc (ca position:fixed).
Exemplu:
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Notă: Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai sus). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
