Tworzenie menu poziomego z wykorzystaniem listy oraz CSS - ćwiczenie 3_2_12_1
Do budowy menu poziomego, wykorzystamy CSS oraz listę - rzeczy które są nam znane. Lista idealnie nadaje się, ponieważ zawiera gotowe mechanizmy potrzebne do działania naszego menu. Każdy kolejny krok będzie kontynuacją poprzedniego. Definicje stylów umieścimy w arkuszu zewnętrznym.
Krok 1 - utworzenie listy
<!doctype html>
<html>
<head>
<title>Tworzenie menu poziomego</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ol>
<li>
menu_1
<ul>
<li><a href="#link_1_1">menu_1_1</a></li>
<li><a href="#link_1_2">menu_1_2</a></li>
<li><a href="#link_1_3">menu_1_3</a></li>
<li><a href="#link_1_4">menu_1_4</a></li>
</ul>
</li>
<li>
<a href="#link_2">menu_2</a>
</li>
<li>
menu_3
<ul>
<li><a href="#link_3_1">menu_3_1</a></li>
<li><a href="#link_3_2">menu_3_2</a></li>
<li><a href="#link_3_3">menu_3_3</a></li>
</ul>
</li>
<li>
menu_4
<ul>
<li><a href="#link_4_1">menu_4_1</a></li>
<li><a href="#link_4_2">menu_4_2</a></li>
</ul>
</li>
</ol>
</body>
</html>
Każdy z punktów naszej listy będzie polem menu. Wskazanie myszką pola, które posiada własne menu ma spowodować pokazanie tego menu. Pola końcowe nie posiadają własnego menu i są linkami. Jak widzimy punkt 2 listy nie posiada własnych punktów i będzie polem końcowym menu.
Główna praca została wykonana. Teraz pozostaje nam pobawić się stylami, aby nasza lista została wyświetlona w postaci menu.
Krok 2 - pola główne ułożone w poziomej linii, pozostałe niewidoczne
Plik z listą pozostaje bez zmian, wszystkie zmiany będą wykonywane w arkuszu stylów. Odpowiednie komentarze umieszczone są w arkuszu stylów.
body
{
font-family:Arial,sans-sherif;/*czcionka*/
font-size:16px;/*rozmiar czcionki*/
color:white;/*kolor czcionki*/
line-height:30px;/*wysokość linii tekstu*/
text-align:center;/*tekst wycentrowany*/
}
a
{
color:white;/*biała czcionka odsyłaczy*/
text-decoration:none;/*bez podkreślenia*/
display:block;/*dzięki temu a wypełni obszar rodzica*/
}
a:hover
{
color:yellow;/*kolor czcionki po najechaniu kursorem myszki*/
}
ol
{
list-style-type:none;/*likwidujemy marker listy*/
}
ol ul
{
display:none;/*ul przynależne ol jest niewidoczne*/
margin:0;/*marginesy zewnętrzne*/
padding:0;/*marginesy wewnętrzne*/
}
li
{
width:150px;/*długość pól menu*/
background-color:#0c5a0c;/*kolor pól menu*/
cursor:default;/*nad tekstem pozostaje jako strzałka*/
border-top:1px solid yellow;/*górna krawędź pola*/
border-left:1px solid yellow;/*lewa krawędź pola*/
}
li:hover, li a:hover
{
background-color:green; /*kolor tła po najechaniu kursorem myszki*/
}
ol li
{
float:left;/*pola główne ustawiają się w jednej linii*/
}
Krok 3 - rozwijanie podmenu głównego menu
Plik z listą nadal pozostaje bez zmian. Po najechaniu wskaźnikiem myszki pola głównego, powinno pokazać się jego podmenu. Aby to osiągnąć, należy uzupełnić arkusz stylów o następujący zapis:
ol > li:hover > ul
{
display:block;
list-style-type:none;
}
ul li
{
margin-left:-1px;
width:170px;
}
Zwróć uwagę, że o powodzeniu decydują w tym przykładzie właściwe relacje rodzic - dziecko. I tak wcześniej zdefiniowaliśmy ol ul {display:none;}
a więc lista ul
jest niewidoczna. Staje się ona widoczna dopiero podczas najechania kursorem myszki (:hover
) na odpowiednie li
- dziecko ol
, które jest jednocześnie rodzicem ul
.