Menu w formie zakładek
Często spotykanym rozwiązaniem w projektowaniu menu strony jest tworzenie go w formie zakładek. Poniższe menu składa się z nieuporządkowanej listy ułożonej poziomo. Zakładki rysujemy w czystym CSS, bez obrazków tła.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title> Menu w formie zakładek </title>
<style>
ul.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
gap: 3px;
border-bottom: 1px solid black;
}
ul.menu a {
display: block;
width: 138px;
padding: 4px 0;
text-align: center;
color: #2c2c2c;
text-decoration: none;
background-color: #e8e8e8;
border-radius: 8px 8px 0 0;
transition: background-color 0.2s;
}
ul.menu a:hover {
background-color: #d0d0d0;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Odsyłacz 1</a></li>
<li><a href="#">Odsyłacz 2</a></li>
<li><a href="#">Odsyłacz 3</a></li>
</ul>
</body>
</html>
Przykład:
