Autor publikacji
Virtual Patriot - Administrator

Tworzymy rozwijane poziome menu CSS

Data publikacji
Ostatnio edytowano

W tej części kursu CSS wykorzystamy naszą wiedzę, jaką do tej pory zdobyliśmy, do utworzenia rozwijanego poziomego menu CSS.

Do utworzenia naszego docelowego menu przyda nam się wiedza jaką zdobyliśmy, między innymi w dziale drugim kursu CSS, w którym "budowaliśmy" pionowe menu CSS.

Nasze rozwijane poziome menu CSS będzie prezentować się w następujący sposób:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

W dziale drugim kursu CSS dowiedzieliśmy się, że do utworzenia pionowego menu najlepiej wykorzystać element ul wraz z elementami li, które razem tworzą listę HTML.

Do utworzenia rozwijanego poziomego menu wykorzystamy zarówno elementy ul oraz li, jak również element ol. W elemencie ol, w jego elementach li, możemy umieszczać inne elementy ul wraz z elementami li, co zostało zaprezentowane w kodzie HTML, który znajduje się poniżej: 

<body>

  <ol>
    <li>czerwony
      <ul>
        <li>róża</li>
        <li>serce</li>
        <li>krew</li>
      </ul>
    </li>

    <li>żółty
      <ul>
        <li>słońce</li>
        <li>cytryna</li>
      </ul>
    </li>

    <li>niebieski
      <ul>
        <li>niebo</li>
      </ul>
    </li>
  </ol>

</body>

Za pomocą elementu ol oraz elementu ul, jak również elementów li, została utworzona lista w liście, która domyślnie prezentuje się następująco:

  1. czerwony
    • róża
    • serce
    • krew
  2. żółty
    • słońce
    • cytryna
  3. niebieski
    • niebo

Poprzedni przykład miał na celu zapoznanie Cię z układem elementów HTML, jaki zostanie wyświetlony w oknie przeglądarki internetowej, w momencie gdy nasz kod HTML będzie tworzył listę w liście.

Naszą budowę menu rozpoczniemy od elementu ol oraz jego elementów li. Dodamy również elementy a do elementów li. Z drugiego działu kursu CSS wiemy, że elementy a są elementami HTML, które tworzą odnośniki, linki. 

<body>

  <ol>
    <li><a href="#">dział - 1</a></li>
    <li><a href="#">dział - 2</a></li>
    <li><a href="#">dział - 3</a></li>
    <li><a href="#">dział - 4</a></li>
  </ol>

</body>

Pierwsza reguła CSS jaką utworzymy będzie odpowiadała za usunięcie domyślnych właściwości z elementu ol, jego właściwości list-style-type, padding oraz margin. Za pomocą właściwości font-size określimy wielkość czcionki tekstu dla wszystkich elementów HTML jakie znajdą się w elemencie ol, a za pomocą właściwości text-align:center; wyśrodkujemy tekst we wszystkich elementach tworzących menu.

Do wspomnianego elementu ol dodamy również właściwość height:2em; oraz właściwość line-height:2em;

Dzięki właściwości height:2em; wysokość naszego elementu ol "naprawi się" i będzie ona wynosiła dwukrotną wartość wartości czcionki tekstu jaka została ustalona dla danego elementu ol (czyli tą wartością będzie 36px, ponieważ 2em = font-size:18px; × 2 = 36px).

Dzięki właściwości line-height:2em; uzyskamy podobny rezultat (wartość wysokości jednego wiersza tekstu dla elementu będzie wynosiła 36px), dzięki czemu wszystkie elementy w naszym docelowym menu, których zawartość będzie mieściła się w jednym wierszu, będą mieć taką samą wysokość (ponieważ właściwość line-height jest dziedziczona przez potomków od rodzica). 

ol {
  list-style-type:none;
  padding:0;
  margin:0;
  font-size:18px;
  height:2em;
  line-height:2em;
  text-align:center;
}

Naszym następnym krokiem będzie sprawienie, aby elementy li znajdujące się w elemencie ol układały się obok siebie, czyli dodamy do nich właściwość float:left; Następnie określimy dla nich wartość szerokości, czyli width:150px; oraz określimy kolor tła, czyli background-color:#FDD700; 

ol > li {
  float:left;
  background-color:#FDD700;
  width:150px;
}

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

W kolejnym kroku określimy właściwości CSS jakie mają posiadać wszystkie elementy a, które znajdą się w naszym menu.

Elementy a powinny wyświetlać się jako elementy blokowe, co uzyskamy dzięki właściwości display:block; Podkreślenie tekstu usuniemy za pomocą właściwości text-decoration:none; Kolor tekstu ustalimy za pomocą właściwości color:#000; Natomiast wartości wszystkich marginesów wewnętrznych określimy za pomocą właściwości padding:0 5px; 

ol a {
  display:block;
  color:#000;
  text-decoration:none;
  padding:0 5px;
}

Za pomocą reguły ol > li > a:hover określimy wygląd omawianego elementu a, w momencie gdy najedziemy na niego kursorem myszki. Zmienimy jego kolor, dzięki właściwości color:#09C; Natomiast za pomocą reguły ol > li:hover określimy wygląd elementu li, gdy najedziemy na taki element kursorem myszki. Zmienimy jego kolor tła, dzięki właściwości background-color:#EEE; 

ol > li > a:hover {
  color:#09C;
}

ol > li:hover {
  background-color:#EEE;
}

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Czas zająć się częścią rozwijaną naszego menu CSS. Część rozwijaną będą stanowić elementy ul wraz z elementami li umieszczonymi w każdym elemencie li elementu ol, w którym będziemy chcieli mieć rozwijane menu, a więc naszym następnym krokiem będzie dodanie kilku nowych elementów HTML, do naszego kodu HTML. 

<body>

  <ol>
    <li><a href="#">dział - 1</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
        <li><a href="#">link - 5</a></li>
      </ul>
    </li>

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

    <li><a href="#">dział - 3</a></li>

    <li><a href="#">dział - 4</a>
      <ul>
        <li><a href="#">link - 1</a></li>
        <li><a href="#">link - 2</a></li>
        <li><a href="#">link - 3</a></li>
        <li><a href="#">link - 4</a></li>
      </ul>
    </li>
  </ol>

</body>

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Wygląd naszego rozwijanego menu trochę się popsuł, a więc musimy go naprawić, tworząc nowe reguły CSS określające wygląd elementów ul i ich potomków, czyli elementów li oraz a.

Usuniemy domyślne właściwości z elementów ul, reguła CSS będzie przypominała tą jaką utworzyliśmy dla elementu ol. 

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

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Naszym kolejnym krokiem będzie sprawienie, aby wszystkie elementy naszego menu zostały od siebie w jakiś sposób odsunięte.

Elementy li znajdujące się w głównym elemencie ol odsuniemy od siebie o jeden piksel, określając, dla wspomnianych elementów li, lewy margines zewnętrzny o wartości jednego piksela, za pomocą właściwości margin-left:1px; 

ol > li {
  float:left;
  background-color:#FDD700;
  width:150px;
  margin-left:1px;
}

ol > li:first-child {
  margin-left:0;
}

Pierwszy element li nie potrzebuje właściwości margin-left, dlatego powyżej została utworzona dodatkowa reguła CSS ol > li:first-child, która usuwa właściwość margin-left z omawianego elementu li, który jest pierwszym dzieckiem swojego rodzica ol.

Jeżeli chodzi o elementy a, które znajduje się w części rozwijanej naszego menu, a więc kolejno w elemencie ul oraz li, to możemy dodać do nich górne białe obramowanie o szerokość jednego piksela, dzięki czemu uzyskamy efekt taki jakby były one odsunięte od siebie o jeden piksel. 

ol > li > ul > li > a {
  border-top:1px solid #FFF;
}

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Przyszedł czas na dodanie kolejnych właściwości CSS, które określą wygląd elementów, które stanowią część rozwijaną naszego poziomego rozwijanego menu CSS.

Za pomocą reguły ol > li > ul > li oraz wartości background-color:#EEE; określimy kolor tła dla elementów li znajdujących się w części rozwijanej menu.

Za pomocą reguły ol > li > ul > li:hover oraz wartości background-color:#DDD; określimy kolor tła dla elementu li znajdującego się w części rozwijanej menu, gdy na ten element najedziemy kursorem myszki.

Za pomocą reguły ol > li > ul > li:hover a oraz wartości color:#09C; określimy kolor tekstu dla elementu a znajdującego się w części rozwijanej menu, gdy najedziemy kursorem myszki na rodzica wspomnianego elementu a.

Dodatkowo dla elementu głównego menu, czyli elementu ol, możemy określić białe tło za pomocą właściwości background-color:#FFF;

Wszystkie opisane reguły CSS zostały przedstawione poniżej: 

ol {
  background-color:#FFF;
}

ol > li > ul > li {
  background-color:#EEE;
}

ol > li > ul > li:hover {
  background-color:#DDD;
}

ol > li > ul > li:hover a {
  color:#09C;
}

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Czas sprawić, aby rozwijana część naszego menu została ukryta oraz aby pojawiała się ona, gdy najedziemy kursorem myszki na któryś element li znajdujący się w głównym elemencie ol.

Wbrew pozorom wspomniane czynności nie są niczym trudnym.

Właściwość display:none; sprawia że dany element HTML nie zostaje pokazany w oknie przeglądarki internetowej (nie jest on widoczny dla użytkownika przeglądającego naszą stronę, lecz znajduje się on ciągle w kodzie HTML). Wspomnianą właściwość należy dodać do głównych elementów stanowiących część rozwijaną naszego menu, czyli do elementów ul, za pomocą reguły ol > li > ul.

Aby dany ukryty element stanowiący część rozwijaną menu CSS ukazał się naszym oczom, po najechaniu kursorem myszki na któryś element li znajdujący się w głównym elemencie ol, należy do takiego elementu dodać właściwość display:block; za pomocą następującej reguły CSS ol > li:hover > ul. 

ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
}

Rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Jak możemy zauważyć, po najechaniu kursorem myszki, na któryś element li, część rozwijana menu ukazuje się naszym oczom, lecz oddziałuje ona na sąsiednie elementy HTML, które znajdują się pod danym menu CSS.

Wspomniana niedogodność możemy "naprawić" na kilka sposobów. Możemy sprawić, aby rozwijana część menu była pozycjonowana absolutnie, dzięki właściwości position:absolute; lecz aby nie mieszać za dużo (bo w następnej części kursu CSS rozbudujemy nasze menu do dwóch poziomów), to sprawimy aby część rozwijana menu nie powiększała wysokości swojego elementu rodzica, czyli elementu li, czynimy to za pomocą właściwości height:2em;

Dla wspomnianego elementu li należy również utworzyć osobną regułę CSS, która będzie zawierać w sobie właściwość position:relative; oraz właściwość height:auto; dzięki czemu naprawimy błąd w naszej "ulubionej" przeglądarce IE7. Wersją 7 przeglądarki Internet Explorer nie należy się już tak naprawdę przejmować, w obecnych czasach, dlatego wspomnianą regułę CSS pominę w swoim kodzie (miłośnicy IE7 na pewno się zmartwią ^^).

Dodatkowo, jeżeli chcemy, aby kolor elementu a, który znajduje się w elemencie li, który z kolei jest umieszczony w głównym elemencie ol, był nadal podświetlony, gdy będziemy poruszać się kursorem myszki po dolnej części menu, to należy zamienić regułę ol > li > a:hover na regułę ol > li:hover > a.

Omówione reguły CSS wraz z właściwościami zostały umieszczone pod spodem: 

ol > li {
  float:left;
  background-color:#FDD700;
  width:150px;
  margin-left:1px;
  height:2em;
}

ol > li:hover > a {
  color:#09C;
}

Finalny rezultat:

  1. dział - 1
  2. dział - 2
  3. dział - 3
  4. dział - 4

Cały kod dokumentu HTML wraz z komentarzami, został przedstawiony poniżej: 

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

    <style>
      /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */

      /* wygląd głównego elementu - ol */
      ol {
        list-style-type:none;
        padding:0;
        margin:0;
        background-color:#FFF;
        font-size:18px;
        height:2em;
        line-height:2em;
        text-align:center;
      }

      /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
      ol a {
        display:block;
        text-decoration:none;
        color:#000;
        padding:0 5px;
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol */
      ol > li {
        float:left;
        width:150px;
        margin-left:1px;
        background-color:#FDD700;
        height:2em;
      }

      /* wygląd elementu - li - pierwszego dziecka elementu - ol */
      ol > li:first-child {
        margin-left:0;
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover {
        background-color:#EEE;
      }

      /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover > a {
        color:#09C;
      }

      /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
      ol > li:hover > ul {
        display:block;
      }

      /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */

      /* wygląd głównych rozwijanych elementów - ul */
      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
      }

      /* wygląd elementu - li - w części rozwijanej */
      ol > li > ul > li {
        position:relative;
        background-color:#EEE;
      }

      /* wygląd elementu - a - w części rozwijanej */
      ol > li > ul > li > a {
        border-top:1px solid #FFF;
      }

      /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
      ol > li > ul > li:hover {
        background-color:#DDD;
      }

      /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
      ol > li > ul > li:hover > a {
        color:#09C;
      }
    </style>

  </head>

  <body>

    <ol>
      <li><a href="#">dział - 1</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
          <li><a href="#">link - 5</a></li>
        </ul>
      </li>

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

      <li><a href="#">dział - 3</a></li>

      <li><a href="#">dział - 4</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
        </ul>
      </li>
    </ol>

  </body>
</html>

W następnej części kursu CSS rozbudujemy nasze poziome rozwijane menu CSS do dwóch poziomów.