Autor publikacji
Virtual Patriot - Administrator

Przypomnienie informacji o pionowym menu CSS

Data publikacji
Ostatnio edytowano

Budowę poziomego menu CSS rozpoczniemy od przypomnienia podstawowych informacji o menu, które zostały zawarte w dziale drugim kursu CSS.

Najczęstszym elementem HTML wykorzystywanym do budowy menu jest element ol lub element ul. Wspomniane elementy HTML mówią przeglądarce internetowej, że chcemy umieścić listę uporządkowaną (ol) lub nieuporządkowaną (ul) na naszej stronie internetowej. Elementami listy HTML są elementy li. Menu jest niczym innym jak zbiorem linków, które są tworzone przez element a. Zbiór naszych linków możemy przedstawić za pomocą wspomnianych list HTML (ol lub ul).

Z działu drugiego kursu CSS wiemy, że podstawowy kod HTML przykładowego menu może wyglądać następująco: 

<ul>
  <li><a href="#">link - 1</a></li>
  <li><a href="#">link - 2</a></li>
  <li><a href="#">link - 3</a></li>
</ul>

Rezultat:

Z działu drugiego kursu CSS wiemy jak usunąć domyślne cechy wyglądu elementów ul oraz a. 

ul {
  margin:0;
  padding:0;
  list-style-type:none;
}

ul > li > a {
  text-decoration:none;
  color:#000;
}

Za pomocą właściwości margin oraz wartości 0 usunęliśmy marginesy zewnętrzne, za pomocą właściwości padding oraz wartości 0 usunęliśmy marginesy wewnętrzne, natomiast za pomocą właściwości list-style-type oraz wartości none usunęliśmy wyróżnik listy. Wszystkie wspomniane właściwości tyczyły się elementu ul, natomiast dla elementu a, który jest dzieckiem elementu li, który z kolei jest dzieckiem elementu ul, usunęliśmy domyślne podkreślenie tekstu (text-decoration:none;) oraz określiliśmy czarny kolor tekstu w skróconym zapisie heksadecymalnym (color:#000;).

Rezultat:

Nasze menu bardziej przypomina menu pionowe, a nie menu poziome, dlatego następnym naszym celem będzie sprawienie, aby blokowe elementy li wyświetliły się obok siebie. Naszą pracę nad poziomym menu CSS ułatwimy sobie, poprzez dodanie różnego koloru tła do elementu ul oraz elementów li, dzięki czemu będziemy widzieć granicę rozmiaru wspomnianych elementów HTML. 

ul {
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:red;
}

ul > li:nth-child(odd) {
  background-color:gold;
}

ul > li:nth-child(even) {
  background-color:lightblue;
}

Selektor ul > li:nth-child(odd) odnosi się do nieparzystych dzieci li elementu ul, natomiast selektor ul > li:nth-child(even) odnosi się do parzystych dzieci li elementu ul.

Rezultat:

Kod dokumentu HTML: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        margin:0;
        padding:0;
        list-style-type:none;
      }

      /* wygląd nieparzystych elementów - li elementu - ul */
      ul > li:nth-child(odd) {
        background-color:gold;
      }

      /* wygląd parzystych elementów - li elementu - ul */
      ul > li:nth-child(even) {
        background-color:lightblue;
      }

      /* wygląd elementów - a */
      ul > li > a {
        text-decoration:none;
        color:#000;
      }
    </style>
  </head>

  <body>

    <ul>
      <li><a href="#">link - 1</a></li>
      <li><a href="#">link - 2</a></li>
      <li><a href="#">link - 3</a></li>
    </ul>

  </body>
</html>

W następnej części kursu CSS zajmiemy się sprawieniem, aby elementy li wyświetlały się obok siebie.