Bară de navigare verticală CSS
O bară de navigare verticală își stivuiește linkurile unul deasupra celuilalt și se întinde de obicei de-a lungul părții stângi sau drepte a unei pagini web.
Structura ei este simplă: o listă neordonată (<ul>) ale cărei elemente de listă (<li>) conțin fiecare câte un link (<a>).
Exemplu
O versiune simplă de început: culoare de fundal gri, cu efecte de hover pe linkuri.
Prompt
Creează o bară de navigare verticală de bază folosind o listă neordonată cu patru linkuri: Acasă, Știri, Contact, Despre. Stilizeaz-o cu lățime 200px, fundal gri deschis (#f1f1f1), fără marcatori de listă, fără margin/padding. Linkurile ar trebui să fie block-level, text negru, padding 8px 16px, fără subliniere. La hover, schimbă fundalul în #555555 și textul în alb.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Vertical Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<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ă
Ca utilizatorii să știe pe ce pagină se află, evidențiază linkul corespunzător cu o clasă „active”.
Exemplu
Prompt
Creează o bară de navigare verticală cu o stare activă. Folosește același stil de bază al barei de navigare verticale (lățime 200px, fundal gri, linkuri block). Adaugă o clasă "active" pe linkul Acasă cu background-color #04AA6D și text alb. Include un efect de hover pe linkurile care nu sunt active.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navbar with Active State</h2>
<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>
Centrarea linkurilor barei de navigare și adăugarea de borduri
Centrarea linkurilor se face cu text-align: center pe <li> sau <a>. Pentru o bordură în jurul întregii bare de navigare, pune border pe <ul>. Apoi fiecare <li> în afară de ultimul primește un border-bottom.
Exemplu
Prompt
Creează o bară de navigare verticală cu linkuri centrate și borduri. Adaugă o bordură 1px solid #555555 în jurul ul-ului, și o bordură de jos pe fiecare li cu excepția ultimului (folosind li:last-child). Centrează textul cu text-align: center. Folosește același stil de bază al barei de navigare verticale.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Navbar with Borders</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555555;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>Centered Navbar Links with Borders</h2>
<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 verticală pe toată înălțimea
Această navigare laterală ocupă toată înălțimea și este „lipicioasă”: nu se mișcă, nici măcar atunci când utilizatorul derulează pagina.
Exemplu
Prompt
Creează o bară de navigare verticală fixă pe toată înălțimea. Elementul ul ar trebui să aibă lățime 130px, fundal gri deschis, height 100%, position fixed și overflow auto. Include linkurile: Acasă, Știri, Contact, Despre. Adaugă conținut în body pentru a demonstra bara laterală fixă.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full-height Vertical Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555555;
color: white;
}
.content {
margin-left: 150px;
padding: 1px 16px;
}
</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>
<div class="content">
<h2>Full-height Fixed Side Navbar</h2>
<p>This side navigation bar is full-height and fixed to the left side.</p>
<p>Notice that this navbar will stay in place even when you scroll the page.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.</p>
</div>
</body>
</html>
Bară de navigare responsivă
Media queries CSS fac bara de navigare responsivă, transformând-o din verticală în orizontală odată ce ecranul este mai lat.
Exemplu
Prompt
Creează o bară de navigare verticală responsivă care devine orizontală pe ecrane mai late, folosind media queries CSS. La lățimi înguste, linkurile se stivuiesc vertical; la lățimi mai mari (de ex. 600px+), se afișează orizontal folosind float sau flexbox.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
@media screen and (min-width: 600px) {
li {
float: left;
}
}
</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>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from vertical to horizontal.</p>
</body>
</html>