Poziome Menu CSS

W tej części kursu CSS utworzymy przykładowe poziome menu CSS od podstaw. Do tego celu wykorzystamy informacje, które zostały przedstawione w poprzednich częściach tego działu kursu CSS, i nie tylko.

Do utworzenia najprostszego poziomego menu CSS możemy wykorzystać element ol lub ul wraz z elementami li oraz a. W naszych kolejnych przykładach będzie to element ol (element ol reprezentuje uporządkowaną (ponumerowaną) listę HTML), do którego będziemy odwoływać się (w naszych regułach CSS) za pomocą wartości jego atrybutu id (w naszym przykładzie będzie to wartość menu).

<ol id="menu">
  <li><a href="#">link - 1</a></li>
  <li><a href="#">link - 2</a></li>
  <li><a href="#">link - 3</a></li>
</ol>

Rezultat:

  1. link - 1
  2. link - 2
  3. link - 3

Pierwszym naszym krokiem podczas tworzenia poziomego menu CSS będzie usunięcie domyślnych właściwości CSS z elementów ol oraz a, jak również określenie przykładowego koloru tła dla elementu ol.

#menu {
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FDF;
}

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

Za pomocą właściwości margin oraz wartości 0 wyzerowaliśmy wszystkie marginesy zewnętrzne elementu ol (odwołaliśmy się do niego za pomocą selektora identyfikatora - #menu).

Za pomocą właściwości padding oraz wartości 0 wyzerowaliśmy wszystkie marginesy wewnętrzne elementu ol.

Za pomocą właściwości list-style-type oraz wartości none usunęliśmy domyślny wygląd wyróżnika uporządkowanej listy ol.

Za pomocą właściwości background-color oraz wartości #FDF określiliśmy kolor tła elementu ol.

Za pomocą właściwości text-decoration oraz wartości none usunęliśmy domyślne podkreślenie tekstu z elementu a, który jest dzieckiem elementu li, który z kolei jest dzieckiem elementu HTML, który posiada atrybut id o wartości menu.

Za pomocą właściwości color oraz wartości #000 określiliśmy kolor tekstu dla wspomnianego elementu a (kolor czarny w skróconym zapisie heksadecymalnym).

Rezultat:

Naszym kolejnym krokiem podczas tworzenia poziomego menu CSS będzie dodanie kilku nowych właściwości wyglądu do elementów HTML wspomnianego menu.

#menu {
  width:400px;
  margin:0 auto;
  padding:0;
  list-style-type:none;
  background-color:#FDF;
}

#menu > li > a {
  text-decoration:none;
  color:#000;
  background-color:#DDD;
}

#menu > li > a:hover {
  color:#00F;
  background-color:#FFF;
}

Za pomocą właściwości width oraz wartości 400px ustaliliśmy czterysta pikseli szerokości dla elementu ol.

Za pomocą właściwości margin oraz wartości 0 auto określiliśmy wartość górnego oraz dolnego marginesu zewnętrznego elementu ol (0) oraz wartość lewego oraz prawego marginesu zewnętrznego elementu ol (auto, dlatego przeglądarka internetowa dobierze takie same wartości dla wspomnianego lewego oraz prawego marginesu zewnętrznego, dzięki czemu blokowy element ol zostanie wyśrodkowany).

Za pomocą właściwości background-color oraz wartości #DDD określiliśmy kolor tła dla elementu a.

Za pomocą właściwości color oraz wartości #00F określiliśmy kolor tekstu w elemencie a (który pojawi się, gdy najedziemy na wspomniany element a kursorem myszki).

Za pomocą właściwości background-color oraz wartości #FFF określiliśmy kolor tła elementu a (który pojawi się, gdy najedziemy na wspomniany element a kursorem myszki).

Za określenie wyglądu elementu HTML w momencie najechania na niego kursorem myszki odpowiada selektor :hover.

Rezultat:

Określamy tymczasowe właściwości CSS dla poszczególnych elementów li, dzięki czemu będzie nam łatwiej zauważyć ich granice szerokości oraz wysokości.

/* TYMCZASOWE WŁAŚCIWOŚCI CSS DLA POSZCZEGÓLNYCH ELEMENTÓW - LI */

/* pierwszy element - li - elementu o identyfikatorze menu */
#menu > li:first-child {
  background-color:red;
  width:20%;
  height:30px;
}

/* drugi element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li {
  background-color:green;
  width:25%;
  height:40px;
}

/* trzeci element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li + li {
  background-color:blue;
  width:30%;
  height:50px;
}

Rezultat:

Za pomocą reguł CSS, które zostały zaprezentowane powyżej, utworzyliśmy różny kolor tła (background-color) kolejnych elementów li, które mają tworzyć nasze poziome menu CSS, różną ich szerokość (width) oraz różną ich wysokość (height), dzięki czemu widzimy granice szerokości oraz wysokości wspomnianych elementów li.

Uwaga Do odszukania poszczególnych elementów li, które są dziećmi elementu #menu możemy wykorzystać selektor CSS3 - :nth-child(), np. #menu > :nth-child(1), #menu > :nth-child(2), #menu > :nth-child(3) itd., jednak jeżeli chcemy, aby reguła CSS utworzona w ten sposób była interpretowana przez starsze przeglądarki, np. IE8, możemy wykorzystać alternatywny sposób wykorzystując do tego celu selektor :first-child oraz selektor brata (+).

Uwaga Jeżeli zdecydujemy się na skorzystanie z selektorów :first-child oraz + musimy zawsze wskazać pierwsze dziecko w danym elemencie HTML za pomocą selektora :first-child, dzięki czemu za pomocą selektora + możemy wskazać kolejnego brata (następny element HTML), czyli również kolejne dziecko danego elementu HTML. Na przykład selektor li:first-child + li odszukuje każdy element li, który jest bratem elementu li, który z kolei jest pierwszym dzieckiem, dlatego nasz przykładowy selektor tak na prawdę odszukuje drugie dziecko (takie samo działanie ma selektor li:nth-child(2)).

Uwaga Jeżeli pominiemy selektor :first-child nasz przykładowy selektor li + li będzie zachowywał się nieco inaczej, co prawda odszuka on drugie dziecko w naszym przykładowym menu CSS, jednak odszuka on również każdego brata li elementu li (każdy element li występujący po sobie), czyli każdy element li oprócz pierwszego.

Czas na sprawienie, aby elementy li naszego poziomego menu CSS zaczęły układać się w poziomie obok siebie.

#menu > li {
  float:left;
}

Rezultat:

Nasze elementy li ułożyły się obok siebie, dzięki temu że została dodana do nich właściwość float wraz z wartością left, dlatego wspomniane elementy li stały się elementami unoszącymi się w lewą stronę (nad obszarem swojego elementu rodzica, do lewej krawędzi elementu ol). Ich ułożenie się bok siebie jest możliwe, dzięki temu że ich wartości szerokości (20%, 25%, 30%) nie przekraczają wartości szerokości ich elementu rodzica (szerokość elementu ol to 400px, czyli 100%).

Tego typu sposób na wyświetlenie kilku blokowych elementów HTML obok siebie jest jednym z najczęściej wykorzystywanych sposobów, jednak sprawia on pewne problemy, np. możemy zauważyć, że od tej pory wysokość elementu ol jest zerowa (o czym była mowa w poprzedniej części tego działu kursu CSS). W poprzedniej części tego działu kursu CSS poznaliśmy sposób na rozwiązanie wspomnianego problemu. Tworzymy dodatkową regułę CSS, która rozwiąże nasz problem.

#menu:after {
  content:'';
  display:block;
  clear:both;
}

Rezultat:

Naszym kolejnym krokiem podczas tworzenia poziomego menu CSS będzie sprawienie, aby jego elementy li w sumie zajmowały cały obszar szerokości swojego elementu rodzica, czyli elementu ol (jego szerokość zawsze wynosi 100%, tzn. szerokość jego elementów dzieci (wyrażona w procentach) jest liczona na podstawie wartości 100%). Należy określić dla wspomnianych elementów li wartości szerokości, które w sumie będą dawały 100%, ponieważ zamierzamy wykorzystać do tego celu wartości wyrażone w procentach, czyli np. 30%, 40%, 30% (30% + 40% + 30% = 100%).

/* pierwszy element - li - elementu o identyfikatorze menu */
#menu > li:first-child {
  background-color:red;
  width:30%;
  height:30px;
}

/* drugi element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li {
  background-color:green;
  width:40%;
  height:40px;
}

/* trzeci element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li + li {
  background-color:blue;
  width:30%;
  height:50px;
}

Uwaga Po lewej lub prawej stronie elementów li nie należy dodawać takich właściwości jak margin, padding, border, ponieważ powiększą one całkowitą szerokość naszych elementów li przez co ich szerokości w sumie nie będą równały się 100%, o czym była mowa w poprzedniej części tego działu kursu CSS (właściwość margin oraz padding możemy dodać do naszych elementów li, tylko jeżeli określimy je również w procentach (całość wraz z szerokościami poszczególnych elementów li nie może przekroczyć 100%), jednak szerokość obramowania (border) określona w procentach różnie może być interpretowana przez przeglądarkę internetową lub w ogóle nie).

Rezultat:

Jednym z głównych elementów HTML każdego menu są elementy a, ponieważ to one umożliwiają nawigację pomiędzy poszczególnymi zasobami internetowymi (dokumenty HTML, PDF, obrazki, filmy itd.). Najprostszy element a zawiera w swojej zawartości zwykły tekst, na który użytkownika musi kliknąć, aby ujrzeć dany zasób internetowy, który został wskazany przez atrybutu href danego elementu a. Wspomniane kliknięcie może sprawić nam pewne problemy, gdy element a nie zajmuje całego obszaru swojego elementu rodzica (w naszym przykładowym menu jest to element li). Dzieje się tak, dlatego że elementy a są traktowane domyślnie przez przeglądarkę internetową jako elementy wyświetlane w linii wraz z tekstem i z innego tego typu elementami HTML. Wspomniany problem możemy w łatwy sposób rozwiązać, a mianowicie musimy sprawić, aby elementy a naszego poziomego menu CSS stały się elementami blokowymi, dzięki czemu ich szerokość będzie dopasowywała się do szerokości ich elementu rodzica. Efekt ten możemy uzyskać za pomocą właściwości display oraz wartości block.

#menu > li > a {
  display:block;
  text-decoration:none;
  color:#000;
  background-color:#DDD;
}

Rezultat:

Od tej pory możemy zauważyć, że gdy umieścimy jeden blokowy element HTML w drugim, to element dziecko będzie dopasowywał się szerokością do szerokości swojego elementu rodzica. Jeżeli wartość wysokości elementu rodzica jest większa od wartości wysokości swojego elementu dziecka (tak jak w naszym przykładzie), to wysokość elementu dziecka nie dopasowuje się automatycznie do wysokości swojego elementu rodzica, jednak możemy to wymusić za pomocą właściwości height oraz wartości 100%. Ostatnią informację należy traktować jako ciekawostkę do zapamiętania.

#menu > li > a {
  display:block;
  height:100%;
  text-decoration:none;
  color:#000;
  background-color:#DDD;
}

Rezultat:

Nasze poziome menu CSS jak do tej pory prezentuje się następująco:

Jak do tej pory zmiana wyglądu elementu a następuje w momencie gdy najedziemy kursorem myszki na obszar wspomnianego elementu a, za co odpowiada następująca reguła CSS:

#menu > li > a:hover {
  color:#00F;
  background-color:#FFF;
}

Podobny efekt możemy uzyskać, gdy zmienimy nieco naszą poprzednią regułę CSS:

#menu > li:hover > a {
  color:#00F;
  background-color:#FFF;
}

Od tej pory wygląd naszego elementu a zmienia się w momencie gdy najedziemy kursorem myszki na obszar elementu rodzica wspomnianego elementu a, czyli na element li (obszar elementów li, w naszym przykładzie, od jakiegoś czasu jest oznaczony różnym kolorem tła, spróbuj najechać kursorem myszki na wspomniany obszar elementu li, aby zobaczyć zmianę wyglądu danego elementu a). Trik ten przyda nam się niebawem (podczas tworzenia rozwijanej części naszego poziomego menu CSS).

Rezultat:

Kilka akapitów wcześniej dodaliśmy parę pomocniczy właściwości CSS do elementów li naszego przykładowego poziomego menu CSS. Wśród wspomnianych właściwości była właściwość określająca wysokość każdego kolejnego elementu li, czyli właściwość height. Wspomnianą właściwość możemy usunąć z reguł CSS, które określają wygląd poszczególnych elementów li w naszym przykładzie.

/* pierwszy element - li - elementu o identyfikatorze menu */
#menu > li:first-child {
  background-color:red;
  width:30%;
  height:30px; /* DO USUNIĘCIA */
}

/* drugi element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li {
  background-color:green;
  width:40%;
  height:40px; /* DO USUNIĘCIA */
}

/* trzeci element - li - elementu o identyfikatorze menu */
#menu > li:first-child + li + li {
  background-color:blue;
  width:30%;
  height:50px; /* DO USUNIĘCIA */
}

Rezultat:

Uwaga Od tej pory wysokość każdego z poszczególnych elementów li jest uzależniona od zawartości jaka znajdzie się w każdym takim elemencie li. W naszym przykładzie zawartością tą jest element a oraz jego zawartość, czyli tekst. Jeżeli wspomniany tekst umieszczony w elemencie a znajdzie się nie w jednym, a w kilku wierszach to wysokość danego blokowego elementu a powiększy się (również wysokość elementu rodzica danego elementu a zostanie powiększona).

Przykład:

Naszym kolejnym krokiem podczas tworzenia poziomego menu CSS będzie polepszenie wyglądu jego elementów a.

#menu > li > a {
  display:block;
  padding:15px;
  text-decoration:none;
  text-align:center;
  color:#000;
  background-color:#DDD;
  box-shadow:0 0 0 1px #FFF inset;
}

Za pomocą właściwości padding oraz wartości 15px określiliśmy wartość wszystkich czterech marginesów wewnętrznych elementu a.

Za pomocą właściwości text-align oraz wartości center sprawiliśmy, aby tekst umieszczony w elemencie a został wyśrodkowany.

Za pomocą właściwości box-shadow oraz wartości 0 0 0 1px #FFF inset określiliśmy cechy wewnętrznego cienia dla elementu a (0 0 0 - zerowe przesunięcie w poziomie, zerowe przesunięcie w pionie, zerowe rozmycie cienia, 1px - powiększenie cienia o jeden piksel, #FFF - biały kolor cienia, inset - cień wewnątrz elementu HTML).

Aby urozmaicić tło elementów a w naszym przykładowym poziomym menu CSS możemy dodać do nich gradient liniowy za pomocą właściwości background-image oraz funkcji linear-gradient(). Więcej o gradientach mogliśmy dowiedzieć się z działu pierwszego - CSS3 - Gradienty liniowe oraz promieniste.

#menu > li > a {
  display:block;
  padding:15px;
  text-decoration:none;
  text-align:center;
  color:#000;
  background-color:#DDD;
  box-shadow:0 0 0 1px #FFF inset;
  background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
}

Zapis linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%) możemy rozumieć jako: utwórz gradient liniowy w elemencie HTML, którego tło od górnej krawędzi do 30% wysokości elementu HTML (liczonej od tej górnej krawędzi) będzie zmieniać barwę z #FFF na #EEE. Następnie będzie zmieniać barwę z #EEE na #DDD od 30% do 70% wysokości elementu HTML (liczonej od tej górnej krawędzi). Następnie będzie zmieniać barwę z #DDD na #FFF od 70% do 100% wysokości elementu HTML (liczonej od tej górnej krawędzi).

Rezultat:

Ostatnią rzeczą jaką wykonamy w tej części kursu CSS jest sprawienie, aby gradient liniowy znikał z elementu a w momencie gdy kursor myszki znajdzie się w obszarze elementu rodzica danego elementu a.

#menu > li:hover > a {
  color:#00F;
  background-color:#FFF;
  background-image:none;
}

Rezultat:

Tworzenie przykładowego poziomego menu CSS dobiegło końca. Pod spodem znajduje się cały kod dokumentu HTML z naszym przykładowym poziomym menu CSS.

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

    <style>
      /* wygląd elementu - ol */
      #menu {
        width:400px;
        margin:0 auto;
        padding:0;
        list-style-type:none;
        background-color:#FDF;
      }

      /* naprawa wysokości elementu - ol */
      #menu:after {
        content:'';
        display:block;
        clear:both;
      }

      /* wygląd elementów - li */
      #menu > li {
        float:left;
      }

      /* pierwszy element - li - elementu o identyfikatorze menu */
      #menu > li:first-child {
        background-color:red;
        width:30%;
      }

      /* drugi element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li {
        background-color:green;
        width:40%;
      }

      /* trzeci element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li + li {
        background-color:blue;
        width:30%;
      }

      /* wygląd elementów - a */
      #menu > li > a {
        display:block;
        padding:15px;
        text-decoration:none;
        text-align:center;
        color:#000;
        background-color:#DDD;
        box-shadow:0 0 0 1px #FFF inset;
        background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
      }

      /* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > a {
        color:#00F;
        background-color:#FFF;
        background-image:none;
      }
    </style>
  </head>

  <body>

    <ol id="menu">
      <li><a href="#">link - 1</a></li>
      <li><a href="#">link - 2</a></li>
      <li><a href="#">link - 3</a></li>
    </ol>

  </body>
</html>

W następnej części kursu CSS zajmiemy się rozwijaną częścią naszego poziomego menu CSS.