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.