- Szczegóły
- Opublikowano: wtorek, 28, luty 2023 13:00
- Andrzej Borecki
- Odsłony: 2168
Lekcja 9 - Rozwijane menu
Rozwijane Menu
Rozwijane Menu jest bardzo fajnym elementem na naszej stronie ponieważ dzięki niemu, możemy łatwo się przemieszczać.
Przykładowe Menu:
Aby wykonać takie Menu będzie nam potrzebna pewna właściwość zwana Dropdown, która sprawi że nasze Menu będzie sie rozwijać.
Zaczynamy od stworzenia wyglądu naszego przykładowego menu.
Część HTML:
<html>
<head>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<div class="dropdown"> - tworzymy kontener o klasie dropdown i owijamy nim przycisk i dropdown-contnent, aby prawidłowo ustawić menu rozwijane za pomocą CSS.
<button class="Przykład">Przykład</button> - tworzy nam przycisk
<div class="dropdown-content"> - Dropdown-content to to, co zawiera nasz element rozwijany
<ul>
<li><a href="#">Przykład 1</a></li>
<li><a href="#">Przykład 2</a></li>
<li><a href="#">Przykład 3</a></li> - nasze zakładki które bądą sie pojawiać w rozwijanej częsci menu
</ul>
</div>
</div> - zakończenie kontenera o klasie dropdown
</body>
</html>
Część CSS:
.Przykład { - wygląd naszego menu
background-color: #aa0404;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
Efekt:
Jak widzimy nie wszystko jest tak jak było zaplanowane. Przykłady 1,2 i 3 nie powinny się od razu pojawiać. Co należy w takim razie zrobić, by to zmienić? Żeby ukryć naszą liste rozwijaną, należy użyć właściwości display: none;. Wartość none dla display, zchowa naszą listę bez usuwania jej.
Teraz jak to wygląda w naszej części CSS:
.dropdown-content {
display: none; - ukryje naszą liste
position: absolute; - Position: absolute; jest potrzebne, gdy chcemy, aby lista rozwijana znajdowała się tuż pod przyciskiem
background-color: #f1f1f1; - kolor tła dla naszej listy (ciemniejszy odcień białego)
min-width: 160px; - minimalna wysokość
}
Sprawiliśmy że lista rozwijana nie pojawia się od razu. Teraz należy zrobić tak, by nasza lista, pojawiała się po najechaniu na przycisk. Do tego użyjemy poznanych już wcześniej właściwości hover i display z nową wartością.
Część CSS:
.dropdown:hover .dropdown-content {
display: block; - nowa dla display wartość block, która sprawia że elementy są widoczne (jest to wartość domyślna dla każdego elementu)
}
Efekt:
Już zaczyna to jakoś wyglądać, jednak nie do końca tak samo. Następną rzeczą jaką musimy zrobić, będzie dodanie trochę estetyki w naszej liście. Patrząc na końcowy efekt widzimy że Przykłady 1, 2 i 3 mają: inny kolor, nie są podkreślone i są od siebie oddalone.
Część CSS:
.dropdown-content a {
color: black; - zmieni kolor zawartości listy na czarny
display: block; - oddzieli od siebie każy z elementów listy
text-decoration: none; - usunie podkreślenie w tekście
padding: 12px 16px; - określi odległość od siebie elementów w liście }
Na koniec możemy dodać efekt podświetlenia na nasz przycik. Zrobimy to z pomocą hover
Efekt końcowy:
Podsumowanie:
Część HTML:
<html>
<head>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<div class="dropdown">
<button class="Przykład">Przykład</button>
<div class="dropdown-content">
<ul>
<li><a href="#">Przykład 1</a></li>
<li><a href="#">Przykład 2</a></li>
<li><a href="#">Przykład 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Część CSS:
.Przykład {
background-color: #aa0404;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
display: block;
text-decoration: none;
padding: 12px 16px;
}
.dropdown:hover .Przykład {
background-color: #880c0c;
}
(ang.Cascading style sheets)
MOJE NOTATKI
