Lista jako Menu HTML

Menu HTML

Lista nieuporządkowana jest rodzajem listy, z której zdecydowanie najczęściej będziemy korzystać. Zastosowanie jej jest dość szerokie i uniwersalne.

Lista nieuporządkowana będzie szczególnie przydatna, gdy będziemy chcieli stworzyć menu do poruszania się po naszej stronie internetowej. Menu to rodzaj nawigacji po naszej stronie internetowej, którą posiada niemalże każda strona internetowa. Menu ułatwia dotarcie do jej kolejnych podstron.

Poniżej znajduje się przykładowe menu pionowe (kolejne elementy menu ułożone są pionowo), które mogłoby posłużyć do naszego kursu html.

Spróbujmy opisać powyższe menu przy pomocy kodu html. Już wiemy, że w tym celu powinniśmy użyć elementu <ul>, czyli naszej listy nieuporządkowanej. Jak się zapewne domyślacie kolejnymi elementami menu, będą po prostu kolejne elementy listy, czyli elementy <li>. A więc do dzieła zacznijmy kodować.

<ul>
  <li>Html, Head, Body</li>
  <li>Edytor Kodu</li>
  <li>Nagłówek i Paragraf</li>
<ul>

Nasze menu nie będzie jeszcze niestety takie kolorowe. Dodawaniem stylu do naszego kodu Html będziemy zajmować się w późniejszych lekcjach. Na razie to co zapisaliśmy powyżej będzie miało następujący wygląd.

No dobrze.., wiemy już, że nasze menu nie będzie tak kolorowo wyglądało jak w przykładzie powyżej dopóki nie sformatujemy go. Ale jest jeszcze jedna sprawa. Tak po prawdzie to, to co napisaliśmy powyżej to nie jest jeszcze funkcjonalne menu. Kliknięcie na poszczególne elementy listy nie powoduje przeniesienie na żadną ze stron. Czegoś tu brakuje w tym zapisie… Owszem, brakuje nam odwołań do innych stron, czyli linków. Ooo… jak dobrze się składa, lekcja o linkach jest następna.

To po co nam w tym wszystkim była lista? Listy używane są do grupowania podobnych danych. W tym przypadku lista idealnie pasuje do zebrania kolejnych elementów menu, szczególnie, że menu zazwyczaj są bardziej rozbudowane, inaczej mówimy, że są wielopoziomowe, tzn. że mamy kategorie i podkategorie stron itd.  Listy będą nam szczególnie przydatne w tworzeniu takich menu, ze względu na możliwości zagnieżdżania kolejnych list.

Menu wielopoziomowe

Możliwość zagnieżdżania będzie nam szczególnie potrzebna, kiedy będziemy tworzyć menu wielopoziomowe. To takie menu, które oprócz głównych kategorii ma jeszcze podkategorię, a potem jeszcze podkategorię podkategorii.

Zapis html takiego menu bez formatowania wyglądałby w następujący sposób.

<ul>
  <li>Kurs Html
    <ul>
      <li>Html, Head, Body</li>
      <li>Edytor Kodu</li>
      <li>Nagłówek i Paragraf</li>
    </ul>
  </li>
<ul>

Nasze menu nie jest jeszcze oczywiście funkcjonale, gdyż w miejsce elementów listy musimy wstawić jeszcze odwołania do innych stron, czyli tzw. linki. O linkach dowiemy się w następnej lekcji.