Bară de navigare orizontală CSS
O bară de navigare orizontală își așază linkurile unul lângă altul și stă de obicei în partea de sus a unei pagini web.
Un element <nav> este adesea pus în jurul lui <ul>, ca să servească drept container al barei.
Bară de navigare orizontală folosind Float
Setarea float pe elementele <li> este o cale de a construi o bară de navigare orizontală.
Exemplu
Prompt
Creează o bară de navigare orizontală folosind float pe elementele li. Elementul ul nu are list-style, fără margin/padding, overflow hidden și fundal închis la culoare (#333333). Elementele li plutesc la stânga (float left). Linkurile sunt block, albe, centrate, cu padding 14px 16px, fără subliniere. Hover schimbă fundalul în #111111. Include linkurile Acasă, Știri, Contact, Despre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Float</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Bară de navigare orizontală folosind Flex
CSS flexbox oferă o cale mai modernă: pune pur și simplu display: flex pe <ul>.
Bară de navigare flex
Prompt
Creează o bară de navigare orizontală folosind CSS flexbox (display: flex pe ul). Elementul ul nu are list-style, fără margin/padding, fundal închis la culoare (#333333). Linkurile sunt block, albe, cu padding 14px 16px, fără subliniere. Hover schimbă fundalul în #111111. Include linkurile Acasă, Știri, Contact, Despre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Flex</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Bară de navigare flex centrată
Ca să muți linkurile barei de navigare în centru, adaugă justify-content: center la bară.
Prompt
Creează o bară de navigare centrată orizontal folosind CSS flexbox. La fel ca bara de navigare flex, dar adaugă justify-content: center la ul pentru a centra linkurile.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Horizontal Navbar with Flex</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Stare activă
Utilizatorii pot vedea pe ce pagină se află atunci când linkul ei este evidențiat printr-o clasă „active”.
Exemplu
Prompt
Creează o bară de navigare orizontală cu o stare activă. Folosește bara de navigare orizontală cu fundal închis la culoare și adaugă o clasă "active" la linkul Acasă cu background-color #04AA6D.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Horizontal Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Bară de navigare orizontală gri
Aici bara este gri, cu o bordură gri subțire în jur.
Exemplu
Prompt
Creează o bară de navigare orizontală gri folosind flexbox. Elementul ul are un fundal gri deschis (#f3f3f3), o bordură de 1px solid #e7e7e7, fără list-style, fără margin/padding. Linkurile au text de culoare închisă, cu padding. Include linkurile Acasă, Știri, Contact, Despre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Horizontal Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
ul li a {
display: block;
color: #666;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #dddddd;
}
ul li a.active {
color: white;
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Aliniere la dreapta a ultimului link
Orice link, sau mai multe, pot sta în partea dreaptă a barei: dă-i elementului de listă float: right.
Exemplu
Prompt
Creează o bară de navigare orizontală în care ultimul link (Despre) este aliniat la dreapta folosind float: right pe acel element li. Restul linkurilor sunt aliniate la stânga. Folosește stilul de bară de navigare cu fundal închis la culoare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right-align Last Link</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li style="float:right"><a href="#">About</a></li>
</ul>
</body>
</html>
Separatoare de tip bordură
Separatoarele dintre linkuri vin dintr-un border-right pe fiecare element <li> în afară de ultimul.
Exemplu
Prompt
Creează o bară de navigare orizontală cu separatoare de tip bordură între linkuri. Adaugă border-right: 1px solid #bbbbbb la toate elementele li, cu excepția ultimului (folosind li:last-child). Folosește stilul de bară de navigare cu fundal închis la culoare, cu float.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Dividers</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Bară de navigare fixă
Ca să fixezi bara de navigare în partea de sus sau de jos a paginii, combină proprietatea position cu top sau bottom.
Fixă sus
Prompt
Creează o bară de navigare orizontală fixată în partea de sus a paginii folosind position: fixed, top: 0 și width: 100%. Adaugă suficient conținut în body pentru a demonstra derularea, în timp ce bara de navigare rămâne fixă. Adaugă margin-top la conținutul din body astfel încât să nu fie ascuns în spatele barei de navigare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
body {
margin-top: 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Fixed Top Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the top.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Fixă jos
Prompt
Creează o bară de navigare orizontală fixată în partea de jos a paginii folosind position: fixed, bottom: 0 și width: 100%. Adaugă suficient conținut în body pentru a demonstra derularea, în timp ce bara de navigare rămâne în partea de jos.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Bottom Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h2>Fixed Bottom Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the bottom.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Bară de navigare lipicioasă (sticky)
O bară de navigare sticky are nevoie de position: sticky pe <ul>. În funcție de poziția de derulare, un astfel de element comută între poziționarea relativă și cea fixă.
Notă: Poziționarea sticky funcționează doar după ce este specificată cel puțin una dintre proprietățile top, right, bottom sau left.
Exemplu
Prompt
Creează o bară de navigare orizontală lipicioasă (sticky) folosind position: sticky și top: 0. Adaugă conținut înainte și după bara de navigare pentru a demonstra că devine fixă atunci când se derulează dincolo de ea.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h1>Sticky Navigation Bar</h1>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Scroll Down</h2>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Meniu drop-down în bara de navigare
Trecerea cursorului peste un element de meniu poate afișa un meniu drop-down plasat în interiorul barei de navigare.
Exemplu
Prompt
Creează o bară de navigare orizontală cu un meniu drop-down. Unul dintre elementele meniului ("Dropdown") afișează o listă drop-down de linkuri la trecerea cursorului (hover). Folosește un div în interiorul li pentru conținutul drop-down, ascuns implicit și afișat la hover cu position: absolute.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu in Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
}
ul li {
float: left;
}
ul li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Bară de navigare responsivă
Cu media queries CSS, o navigare superioară responsivă poate trece de la orizontală la verticală atunci când ecranul devine mai mic.
Exemplu
Prompt
Creează o bară de navigare orizontală responsivă care se restrânge pe verticală pe ecrane mici, folosind media queries CSS. Pe ecrane late, linkurile se afișează orizontal; pe ecrane înguste, se stivuiesc vertical.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
ul li a.active {
background-color: #04AA6D;
}
@media screen and (min-width: 600px) {
ul li {
float: left;
}
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from horizontal to vertical.</p>
</body>
</html>