24. Menu rozwijane w CSS

> Dodaj do ulubionych

W poprzednim rozdziale wykonali┼Ťmy stylizacj─Ö strony g┼é├│wnej naszej witryny, dzi─Öki czemu wygl─ůda ona ju┼╝ atrakcyjnie i jest w pe┼éni funkcjonalna oraz b─Ödziemy mogli j─ů wykorzysta─ç jako podstaw─Ö do utworzenia szablonu podstron. Tym jednak zajmiemy si─Ö w nast─Öpnym rozdziale.

Teraz natomiast ulepszymy nawigacj─Ö g┼é├│wn─ů przez dodanie do niej funkcjonalno┼Ťci menu rozwijanego, jakie mo┼╝na spotka─ç na prawie ka┼╝dej stronie internetowej. Dzia┼éanie tego menu polega na tym, ┼╝e kiedy najedziemy kursorem myszy na wybrany element, pojawia si─Ö lista dodatkowych opcji do wyboru. Sp├│jrz na poni┼╝szy zrzut ekranu:

Finalna wersja menu rozwijane w CSS

Na naszej stronie ka┼╝dy element menu g┼é├│wnego, opr├│cz odno┼Ťnika do strony g┼é├│wnej, b─Ödzie mia┼é menu rozwijane prowadz─ůce do poszczeg├│lnych cz─Ö┼Ťci danej strony. To oczywi┼Ťcie tylko demonstracja techniki. W prawdziwej witrynie menu rozwijane zazwyczaj zawiera linki do podkategorii witryny.

Menu rozwijane na stronie internetowej mo┼╝na utworzy─ç na dwa sposoby ÔÇô przy u┼╝yciu JavaScriptu lub przy u┼╝yciu samego kodu CSS. Technika z u┼╝yciem CSS jest bardzo prosta i efektywna, wi─Öc wybierzemy w┼éa┼Ťnie to rozwi─ůzanie.

Aby utworzy─ç menu rozwijane w CSS wystarczy zna─ç tylko kilku selektor├│w i w┼éasno┼Ťci tej technologii. Znasz ju┼╝ prawie wszystkie z nich. Do pe┼éni szcz─Ö┼Ťcia brakuje Ci jeszcze tylko znajomo┼Ťci technik pozycjonowania element├│w za pomoc─ů w┼éasno┼Ťci position. Nie s─ů one skomplikowane, wi─Öc pora uzupe┼éni─ç ten brak w wiedzy.

Pozycjonowanie element├│w w CSS

Kiedy przegl─ůdarka wczytuje nasz─ů obecn─ů stron─Ö internetow─ů, na kt├│rej nie ma jeszcze ┼╝adnych pozycjonowanych element├│w, to umieszcza wszystkie elementy w tzw. uk┼éadzie normalnym (ang. normal flow).

Uk┼éad normalny element├│w na stronie internetowej to po prostu ich rozmieszczenie zgodnie z og├│lnymi zasadami rz─ůdz─ůcymi elementami blokowymi i ┼Ťr├│dliniowymi. Umiejscowienie ka┼╝dego elementu w odniesieniu do s─ůsiednich element├│w jest okre┼Ťlane na podstawie jego po┼éo┼╝enia w kodzie ┼║r├│d┼éowym.

Kiedy natomiast element jest pozycjonowany, to jego położenie jest wyznaczane w inny sposób, zależny od wybranej techniki.

Do pozycjonowania element├│w w CSS s┼éu┼╝y w┼éasno┼Ť─ç position, kt├│ra przyjmuje pi─Ö─ç warto┼Ťci: absolute, fixed, relative, static i sticky.

Ustawienia te naj┼éatwiej jest zrozumie─ç na podstawie konkretnych przyk┼éad├│w. Poni┼╝ej wi─Öc znajduje si─Ö podstawowy kod CSS i HTML, na kt├│rym oprzemy dalsze obja┼Ťnienia:

Kod CSS:

body {padding: 0; margin: 0}
p {margin: 20px; width: 300px;}
.a {
  background-color: gray;
}
.b {
  background-color: lightpink;
}
.c {
  background-color: lightgreen;
}

Kod HTML:

<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis sit amet felis ac tincidunt. Vivamus sit amet dolor vulputate, pretium sem vel, imperdiet neque. Morbi semper odio in nisi.</p>
<p class="b">Cras lacinia diam tempus lacinia auctor. In lobortis dui a varius fermentum. Sed cursus commodo risus, non bibendum ligula dictum vitae. In auctor sagittis orci molestie vehicula. Sed egestas.</p>
<p class="c">Integer ligula lectus, sodales ut faucibus nec, varius sed dolor. Mauris egestas vitae eros nec ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Pozycjonowanie statyczne, w┼é─ůczane za pomoc─ů warto┼Ťci static, potrzebnej tylko, je┼Ťli wcze┼Ťniej zdefiniowano inn─ů i teraz chcemy j─ů przywr├│ci─ç, to domy┼Ťlny spos├│b pozycjonowania element├│w w uk┼éadzie normalnym, kt├│re ju┼╝ znasz. W zwi─ůzku z tym bez trudu przewidzisz, ┼╝e akapity zostan─ů po prostu wy┼Ťwietlone w oknie przegl─ůdarki jeden pod drugim w takiej kolejno┼Ťci, w jakiej znajduj─ů si─Ö w kodzie ┼║r├│d┼éowym:

Ilustracja pozycjonowania statycznego

Pozycjonowanie absolutne lub bezwzgl─Ödne

Pozycjonowanie absolutne lub bezwzgl─Ödne, w┼é─ůczane za pomoc─ů warto┼Ťci absolute, powoduje ÔÇ×wyj─ÖcieÔÇŁ elementu z normalnego uk┼éadu i ustalenie jego pozycji wzgl─Ödem najbli┼╝szego mu nadrz─Ödnego elementu pozycjonowanego, a je┼Ťli takiego nie ma, to wzgl─Ödem elementu body. Dla uproszczenia u nas na razie jest tylko element nadrz─Ödny body, wi─Öc pozycja b─Ödzie ustalana wzgl─Ödem niego.

Kiedy pozycjonujemy element absolutnie, to przestaje on ÔÇ×oddzia┼éywa─çÔÇŁ z innymi elementami na stronie, tzn. jego po┼éo┼╝enie nie wp┼éywa na po┼éo┼╝enie innych element├│w. Mo┼╝na powiedzie─ç, ┼╝e ÔÇ×unosi si─ÖÔÇŁ on nad nimi, nie maj─ůc z nimi kontaktu i je zas┼éaniaj─ůc.

Sama deklaracja position: absolute powoduje tylko zmian─Ö trybu wyznaczania po┼éo┼╝enia elementu. Aby jednak rzeczywi┼Ťcie go przesun─ů─ç, potrzebne s─ů dodatkowe w┼éasno┼Ťci.

Do okre┼Ťlania po┼éo┼╝enia wszystkich element├│w pozycjonowanych s┼éu┼╝─ů cztery w┼éasno┼Ťci: top, right, bottom i left. Dzia┼éaj─ů one tylko wtedy, gdy element ma zdefiniowan─ů w┼éasno┼Ť─ç position o innej warto┼Ťci ni┼╝ static.

W┼éasno┼Ť─ç top okre┼Ťla odleg┼éo┼Ť─ç od g├│rnej kraw─Ödzi kontenera, wzgl─Ödem kt├│rego jest pozycjonowany element. W┼éasno┼Ťci right, bottom i left robi─ů to samo w odniesieniu do odpowiednio prawej, dolnej i lewej kraw─Ödzi kontenera.

Powiedzmy na przyk┼éad, ┼╝e chcemy pozycjonowa─ç absolutnie akapit z klas─ů c w nast─Öpuj─ůcy spos├│b:

.c {
  background-color: lightgreen;
  position: absolute;
  top: 40px;
  left: 100px;
}

Teraz akapit c zostanie wyj─Öty z normalnego uk┼éadu element├│w na stronie i jego po┼éo┼╝enie zostanie okre┼Ťlone w odniesieniu do kraw─Ödzi elementu body (poniewa┼╝ jest to jego jedyny element nadrz─Ödny) zgodnie z ustawieniami w┼éasno┼Ťci top i left:

Ilustracja pozycjonowania absolutnego

Teraz interesuj─ůcy nas element nie oddzia┼éuje w ┼╝aden spos├│b z pozosta┼éymi elementami, a jego po┼éo┼╝enie zosta┼éo ustalone w taki spos├│b, ┼╝e jego lewy g├│rny r├│g znajduje si─Ö w odleg┼éo┼Ťci 40 pikseli od g├│rnej kraw─Ödzi elementu body i 100 pikseli od lewej kraw─Ödzi elementu body. Dodatkowo w gr─Ö wchodz─ů marginesy, wi─Öc do tych warto┼Ťci trzeba doda─ç jeszcze po 20 pikseli.

Teraz wyja┼Ťnimy sobie dok┼éadnie, co znaczy ÔÇ×ustalanie pozycji wzgl─Ödem najbli┼╝szego elementu pozycjonowanegoÔÇŁ. Powiedzmy, ┼╝e mamy element span o tre┼Ťci ÔÇ×To jest element spanÔÇŁ, kt├│ry znajduje si─Ö za akapitami:

<span class="d">To jest element span</span>

Je┼Ťli ten element wypozycjonujemy bezwzgl─Ödnie, to jego po┼éo┼╝enie zostanie wyznaczone w odniesieniu do elementu body:

.d {
  position: absolute;
  background-color: lightblue;
  top: 30px;
  left: 40px;
}
Span pierwszy

Zgodnie z oczekiwaniami położenie elementu span zostało ustalone w odniesieniu do elementu body, ponieważ nie ma on żadnego nadrzędnego elementu pozycjonowanego.

A teraz umie┼Ťcimy ten element span w akapicie b:

<p class="c">Integer ligula lectus, sodales ut faucibus nec, varius sed dolor. Mauris egestas vitae eros nec ultricies. <span class="d">To jest element span</span> Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Efekt tej zmiany b─Ödzie nast─Öpuj─ůcy:

Span wewn─ůtrz akapitu c

Teraz położenie elementu span jest wyznaczane względem lewego górnego rogu elementu c, ponieważ element ten jest najbliższym pozycjonowanym przodkiem elementu span.

Mo┼╝esz pomy┼Ťle─ç, ┼╝e po┼éo┼╝enie elementu span si─Ö zmieni┼éo, poniewa┼╝ zmienili┼Ťmy jego umiejscowienie w kodzie ┼║r├│d┼éowym. Poni┼╝szy zrzut ekranu pokazuje umiejscowienie elementu span po usuni─Öciu w┼éasno┼Ťci position: absolute z regu┼éy CSS akapitu c.

Span poza akapitem c

Umiejscowienie elementu span w kodzie źródłowym się nie zmieniło, a mimo to nadal znajduje się on w tym samym położeniu na stronie, co wtedy, gdy w kodzie źródłowym znajdował się pod akapitami.

Jako ┼╝e elementy pozycjonowane mo┼╝na swobodnie przemieszcza─ç po stronie, powstaje problem ich nak┼éadania si─Ö na siebie, tzn. mo┼╝emy spowodowa─ç, ┼╝e jeden element b─Ödzie cz─Ö┼Ťciowo lub ca┼ékowicie zakrywa┼é inny.

Je┼Ťli w ┼╝aden spos├│b tego nie zmienimy, to przegl─ůdarka stosuje kolejno┼Ť─ç zgodn─ů z kolejno┼Ťci─ů wyst─Öpowania element├│w w kodzie ┼║r├│d┼éowym, tzn. ÔÇ×na wierzchuÔÇŁ jest ten, kt├│ry zosta┼é wpisany ostatni.

Za pomoc─ů w┼éasno┼Ťci CSS z-index mo┼╝na zmieni─ç kolejno┼Ť─ç element├│w na stosie (ang. stacking context). Jako warto┼Ť─ç przyjmuje ona ujemn─ů lub dodatni─ů liczb─Ö ca┼ékowit─ů. Im wy┼╝sza warto┼Ť─ç z-index, tym wy┼╝sza pozycja na stosie, czyli tym bli┼╝ej wierzchu.

Weźmy na przykład poniższy znany nam już kod HTML:

<p class="c">Integer ligula lectus, sodales ut faucibus nec, varius sed dolor. Mauris egestas vitae eros nec ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<span class="d">To jest element span</span>

Je┼Ťli ┼╝adnemu z tych element├│w nie zdefiniujemy w┼éasno┼Ťci z-index oraz wypozycjonujemy je tak, ┼╝e ich po┼éo┼╝enia b─Öd─ů si─Ö ze sob─ů pokrywa─ç, to element span b─Ödzie cz─Ö┼Ťciowo zakrywa┼é akapit, poniewa┼╝ w kodzie ┼║r├│d┼éowym HTML jest zdefiniowany p├│┼║niej:

Span zakrywaj─ůcy akapit

Je┼Ťli jednak akapitowi przypiszemy wy┼╝sz─ů warto┼Ť─ç w┼éasno┼Ťci z-index ni┼╝ elementowi span, to na wierzchu b─Ödzie znajdowa┼é si─Ö ten pierwszy. Sp├│jrz na poni┼╝szy kod CSS:

.c {
  background-color: lightgreen;
  position: absolute;
  top: 40px;
  left: 100px;
  z-index: 2;
}
.d {
  position: absolute;
  background-color: lightblue;
  top: 60px;
  left: 40px;
  z-index: 1;
}

Przy takich ustawieniach osi─ůgniemy nast─Öpuj─ůcy efekt:

Span pod akapitem

Pozycjonowanie relatywne lub wzgl─Ödne

Pozycjonowanie wzgl─Ödne, w┼é─ůczane za pomoc─ů warto┼Ťci relative, pozwala okre┼Ťli─ç po┼éo┼╝enie elementu wzgl─Ödem jego po┼éo┼╝enia, jakie przyj─ů┼éby w uk┼éadzie normalnym strony. Inaczej m├│wi─ůc, najpierw przegl─ůdarka wstawia dany element w miejscu, w kt├│rym znajdowa┼éby si─Ö, gdyby nie by┼é w og├│le pozycjonowany, a nast─Öpnie przesuwa go zgodnie z ustawieniami w┼éasno┼Ťci top, right, bottom i left.

Przesuni─Öcie wzgl─Ödne elementu nie wp┼éywa na otaczaj─ůce go elementy, przez co pozostaje po nim ÔÇ×dziuraÔÇŁ na stronie. Przyjrzymy si─Ö temu na przyk┼éadzie. Powiedzmy, ┼╝e mamy na stronie taki akapit:

<p class="b">Cras lacinia diam tempus lacinia auctor. In lobortis dui a varius fermentum. Sed cursus commodo risus, non bibendum ligula dictum vitae. <span class="d">To jest element span"/span" In auctor sagittis orci molestie vehicula. Sed egestas.</p>

Tym dw├│m elementom odpowiadaj─ů nast─Öpuj─ůce regu┼éy CSS:

.b {
  background-color: lightpink;
}
.d {
  background-color: lightblue;
}

Na razie oba te elementy maj─ů tylko okre┼Ťlone kolory t┼éa (oraz szeroko┼Ť─ç i margines we wcze┼Ťniejszej regule). Nie pozycjonujemy ich w ┼╝aden spos├│b, wi─Öc w oknie przegl─ůdarki wygl─ůdaj─ů tak:

Ilustracja pozycjonowania wzgl─Ödnego bez pozycjonowania

Teraz zastosujemy pozycjonowanie względne do elementu span i zobaczymy, co się stanie. Zamień powyższe reguły CSS na poniższe:

.b {
  background-color: lightpink;
}
.d {
  background-color: lightblue;
  position: relative;
  top: 40px;
  left: 80px;
}

Teraz nasze elementy prezentuj─ů si─Ö nast─Öpuj─ůco:

Pozycjonowanie wzgl─Ödne - przesuni─Öcie span

Element span zosta┼é przesuni─Öty wzgl─Ödem swojego statycznego po┼éo┼╝enia o liczb─Ö pikseli okre┼Ťlon─ů przez w┼éasno┼Ťci top i left. Zwr├│─ç uwag─Ö na puste miejsce pozosta┼ée tam, gdzie powinien si─Ö normalnie znajdowa─ç oraz na to, ┼╝e jego element nadrz─Ödny nie jest pozycjonowany ÔÇô w przypadku pozycjonowania wzgl─Ödnego nie jest to wymogiem.

W ramach szybkiego ─çwiczenia sprawd┼║, co si─Ö stanie, kiedy zmienisz pozycjonowanie wzgl─Ödne elementu span na bezwzgl─Ödne oraz kiedy przypiszesz w┼éasno┼Ť─ç pozycjonowania zawieraj─ůcemu go akapitowi.

Pozosta┼ée dwa typy pozycjonowania to pozycjonowanie ÔÇ×kleisteÔÇŁ (warto┼Ť─ç sticky) i na sta┼ée (warto┼Ť─ç fixed).

Pozycjonowanie kleiste i na stałe

Elementy pozycjonowane na sta┼ée (za pomoc─ů warto┼Ťci fixed) maj─ů po┼éo┼╝enie okre┼Ťlane w podobny spos├│b, jak elementy pozycjonowane bezwzgl─Ödnie, ale dodatkowo pozostaj─ů w danym miejscu bez wzgl─Ödu na przewijanie tre┼Ťci.

Natomiast element kleisty (pozycjonowany przy u┼╝yciu warto┼Ťci sticky) zachowuje si─Ö cz─Ö┼Ťciowo jak element pozycjonowany wzgl─Ödnie, a cz─Ö┼Ťciowo jak element pozycjonowany na sta┼ée.

Najpierw przegl─ůdarka okre┼Ťla jego po┼éo┼╝enie w taki sam spos├│b, jak po┼éo┼╝enie elementu pozycjonowanego wzgl─Ödnie, a nast─Öpnie zatrzymuje go w miejscu okre┼Ťlonym przez w┼éasno┼Ťci top, right, bottom, left podczas przewijania tre┼Ťci.

W poni┼╝szym okienku znajduje si─Ö przyk┼éadowy kod pozwalaj─ůcy wypr├│bowa─ç te dwa rodzaje pozycjonowania. Najpierw przetestuj pozycjonowanie na sta┼ée, a nast─Öpnie zmie┼ä warto┼Ť─ç fixed w regule dotycz─ůcej akapitu na sticky i sprawd┼║, jak zmieni si─Ö zachowanie element├│w w okienku po prawej stronie.

See the Pen Pozycjonowanie sticky i fixed by Łukasz Piwko (@shebangpl) on CodePen.

Budowa menu rozwijanego w CSS

Znaj─ůc techniki pozycjonowania element├│w CSS, mo┼╝emy przej┼Ť─ç do tworzenia menu rozwijanego. Najpierw utworzymy sam komponent, kt├│ry b─Ödzie pojawia┼é si─Ö po najechaniu kursorem na element menu, a potem dodamy selektor odpowiadaj─ůcy za interaktywno┼Ť─ç.

Przypomnijmy, jak obecnie wygl─ůda struktura HTML naszego menu g┼é├│wnego:

<nav>
  <ul>
    <li><a href="index.html">Główna</a></li>
    <li><a href="erdos.html">Paul Erd┼Ĺs</a></li>
    <li><a href="feynman.html">Richard Feynman</a></li>
    <li><a href="why-the-lucky-stiff.html">why the lucky stiff</a></li>
  </ul>
</nav>

Komponenty pojawiaj─ůce si─Ö w wyniku rozwini─Öcia menu umie┼Ťcimy w elementach listy za odno┼Ťnikami. Zdefiniujemy je w postaci elementu div, kt├│ry jest og├│lnym kontenerem blokowym bez ┼╝adnego semantycznego znaczenia ÔÇô czym┼Ť w rodzaju elementu span, tylko w wersji blokowej. U┼╝ywa si─Ö go zawsze wtedy, gdy potrzebny jest element blokowy, ale nie pasuje ┼╝aden element semantyczny.

W ramach przyk┼éadu dodamy funkcj─Ö rozwijania do pozycji menu Paul Erd┼Ĺs. Odno┼Ťniki w tym podmenu b─Öd─ů prowadzi┼éy do wybranych sekcji na stronie o Erd┼Ĺsie.

<li>
  <a href="erdos.html">Paul Erd┼Ĺs</a>
  <div>
    <a href="#">Studia</a>
    <a href="#">Osi─ůgni─Öcia naukowe</a>
    <a href="#">Ciekawostki</a>
    <a href="#">Projekt Manhattan</a>
    <a href="#">Liczba Erd┼Ĺsa</a>
  </div>
</li>

Wysuwany komponent w naszym menu b─Ödzie sk┼éada┼é si─Ö z elementu div zawieraj─ůcego elementy a reprezentuj─ůce linki. Jak wida─ç struktura HTML tego komponentu jest bardzo prosta. Teraz pora doda─ç odpowiednie regu┼éy CSS. Zaczniemy od kosmetyki:

#main-header nav li div {
  min-width: 190px;
  text-align: left;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  padding: 15px 0;
  font-size: 90%;
}

Za pomoc─ů tej regu┼éy okre┼Ťlili┼Ťmy, ┼╝e element div znajduj─ůcy si─Ö w elemencie li znajduj─ůcym si─Ö w elemencie nav, kt├│ry znajduje si─Ö w g┼é├│wnym nag┼é├│wku (taki d┼éugi selektor pozwala nam odnie┼Ť─ç si─Ö do wybranego elementu bez stosowania klas, dzi─Öki czemu kod HTML jest bardziej przejrzysty) ma mie─ç minimaln─ů szeroko┼Ť─ç 190 pikseli, tekst wyr├│wnany do lewej, jednolite szare obramowanie o grubo┼Ťci jednego piksela, bia┼éy kolor t┼éa, dope┼énienie g├│rne i dolne o szeroko┼Ťci 15 pikseli oraz rozmiar pisma wynosz─ůcy 90% rozmiaru pisma elementu nadrz─Ödnego. Nie opisuj─Ö ju┼╝ szczeg├│┼éowo tych ustawie┼ä, poniewa┼╝ nie ma tu dla nas niczego nowego.

W nast─Öpnej kolejno┼Ťci zajmiemy si─Ö formatowaniem odno┼Ťnik├│w, kt├│re jak wiadomo s─ů elementami ┼Ťr├│dliniowymi, wi─Öc domy┼Ťlnie nie b─Öd─ů ustawia─ç si─Ö jeden nad drugim, tylko w jednej linii. W zwi─ůzku z tym dodajemy nast─Öpuj─ůce regu┼éy CSS:

#main-header nav li div a {
  display: block;
  margin: 0 15px 12px 20px;
}
#main-header nav li div a:last-child {
  margin-bottom: 0;
}

Podobnie jak poprzednio stosujemy do┼Ť─ç d┼éugie selektory, kt├│re pozwalaj─ů nam jednoznacznie odnie┼Ť─ç si─Ö do odpowiednich element├│w bez stosowania klas.

Najpierw zamieniamy ┼é─ůcza w elementy blokowe i nadajemy im ustawienia margines├│w, aby ┼éadnie wygl─ůda┼éy.

Następnie, w drugiej regule, likwidujemy dolny margines ostatniego elementu a w naszym komponencie, aby na dole nie było za dużo pustego miejsca (działa tam już dopełnienie dolne ustawione dla elementu div, które bez tej reguły zsumowałoby się z marginesem).

To wszystko je┼Ťli chodzi o kwesti─Ö wygl─ůdu. Teraz nasz komponent podmenu wygl─ůda tak:

Pierwsza wersja podmenu

Komponent wygl─ůda ju┼╝ dobrze, ale po pierwsze najpierw musimy sprawi─ç, aby domy┼Ťlnie by┼é niewidoczny i pojawia┼é si─Ö dopiero po najechaniu kursorem na pozycj─Ö menu, a po drugie musimy sprawi─ç, aby wy┼Ťwietla┼é si─Ö w odpowiednim miejscu.

Aby element by┼é niewidoczny na stronie i w ┼╝aden spos├│b nie wp┼éywa┼é na po┼éo┼╝enie innych element├│w, nale┼╝y u┼╝y─ç deklaracji display: none;. Dodajemy wi─Öc j─ů do regu┼éy dotycz─ůcej elementu div i sprawdzamy efekt:

Podmenu z display none

Doskonale, element znikn─ů┼é i nie zaburza uk┼éadu strony.

Wszystko mamy gotowe, wysuwany element jest ukryty, wi─Öc pozostaje nam ju┼╝ tylko sprawi─ç, aby pojawia┼é si─Ö po najechaniu kursorem na pozycj─Ö menu. To bardzo proste. Wystarczy odpowiednio u┼╝y─ç znanej nam ju┼╝ pseudoklasy :hover. Przypomn─Ö, ┼╝e ta pseudoklasa pozwala zastosowa─ç ustawienia CSS do elementu, nad kt├│rym znalaz┼é si─Ö kursor ÔÇô czyli robi dok┼éadnie to, czego nam potrzeba.

W tym przypadku chcemy, aby po najechaniu na wybrany element li (reprezentuj─ůcy pozycj─Ö menu) zmienia┼éy si─Ö w┼éa┼Ťciwo┼Ťci wy┼Ťwietlania wybranego elementu div (reprezentuj─ůcego podmenu). W zwi─ůzku z tym napiszemy dla przegl─ůdarki instrukcj─Ö nakazuj─ůc─ů jej zastosowa─ç okre┼Ťlone ustawienia CSS do elementu div, kiedy nad zawieraj─ůcym go elementem li pojawi si─Ö kursor:

#main-header nav li:hover div {
  display: block;
}

To wszystko. Kiedy nad elementem li w menu g┼é├│wnym pojawi si─Ö kursor myszy, do znajduj─ůcego si─Ö w nim elementu div zostanie zastosowana deklaracja display: block;. Wcze┼Ťniej zastosowali┼Ťmy ustawienie display: none;, aby schowa─ç podmenu, a teraz je zmieniamy, aby element pojawia┼é si─Ö w danej sytuacji.

Dodaj t─Ö regu┼é─Ö na ko┼äcu poprzednich regu┼é dotycz─ůcych menu i sprawd┼║ efekt, naje┼╝d┼╝aj─ůc kursorem na pozycj─Ö Paul Erd┼Ĺs. Okazuje si─Ö, ┼╝e to jeszcze nie to, o co nam chodzi┼éo. Wprawdzie podmenu si─Ö pojawia, ale jest ustawione w nieodpowiednim miejscu i na dodatek robi ba┼éagan w┼Ťr├│d innych element├│w. Musimy znale┼║─ç spos├│b, na wyj─Öcie go z normalnego uk┼éadu i sprawienie, aby unosi┼éo si─Ö nad innymi elementamiÔÇŽ Co┼Ť ju┼╝ powinno Ci ┼Ťwita─ç w g┼éowie.

Efekt hover bez position

Problem z pozycjonowaniem podmenu za┼éatwimy za pomoc─ů dw├│ch deklaracji CSS: position: absolute; oraz position: relative;.

Deklaracj─Ö position: absolute; dodamy do regu┼éy CSS dotycz─ůcej elementu div, poniewa┼╝ chcemy, aby ÔÇ×unosi┼éÔÇŁ si─Ö nad innymi elementami.

Natomiast deklaracj─Ö position: relative; zdefiniujemy dla element├│w li zawieraj─ůcych elementy div reprezentuj─ůce podmenu, poniewa┼╝ chcemy, aby nasze podmenu by┼éy pozycjonowane w odniesieniu do po┼éo┼╝enia ich kontener├│w, kt├│rymi s─ů w┼éa┼Ťnie elementy listy.

Co ciekawe, w tym przypadku nie musimy nawet u┼╝ywa─ç w┼éasno┼Ťci top, right, bottom i left, poniewa┼╝ tak si─Ö z┼éo┼╝y┼éo, ┼╝e domy┼Ťlne po┼éo┼╝enie akurat nam pasuje.

Poni┼╝ej znajduje si─Ö kompletny arkusz styl├│w naszego menu rozwijanego:

#main-header nav li {
  position: relative;
}
#main-header nav li div {
  display: none;
  position: absolute;
  min-width: 190px;
  text-align: left;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  padding: 15px 0;
  font-size: 90%;
}
#main-header nav li div a {
  display: block;
  margin: 0 15px 12px 20px;
}
#main-header nav li div a:last-child {
  margin-bottom: 0;
}
#main-header nav li:hover div {
  display: block;
}

Dopie┼Ťcili┼Ťmy ju┼╝ nasz─ů stron─Ö g┼é├│wn─ů i menu, wi─Öc pora zaj─ů─ç si─Ö podstronami. To b─Ödzie tematem nast─Öpnego rozdzia┼éu.

Podsumowanie

  • Elementy na stronie internetowej mo┼╝na pozycjonowa─ç za pomoc─ů w┼éasno┼Ťci position.
  • Dost─Öpnych jest pi─Ö─ç rodzaj├│w pozycjonowania: static, absolute, relative, sticky, fixed.
  • Deklaracja display: none; sprawia, ┼╝e element nie jest uwzgl─Ödniany w drzewie dokumentu.
  • Deklaracja visibility: hidden; sprawia, ┼╝e element znajduje si─Ö na stronie, ale jest niewidoczny.
  • Kluczowym sk┼éadnikiem budowy menu rozwijanego w CSS jest pseudoklasa :hover.

─ćwiczenia

  1. Wybierz dowolny kod testowy z podrozdzia┼éu o pozycjonowaniu i sprawd┼║ dzia┼éanie r├│┼╝nych ustawie┼ä w┼éasno┼Ťci top, right, bottom i left. Szczeg├│lnie wypr├│buj r├│┼╝ne ustawienia przeciwstawnych warto┼Ťci, tzn. zdefiniuj w┼éasno┼Ťci left i right oraz top i bottom.
  2. Odno┼Ťniki w podmenu Erd┼Ĺsa nie zawieraj─ů prawdziwych adres├│w, tylko krzy┼╝yki. Zamie┼ä je na identyfikatory fragment├│w, aby prowadzi┼éy do konkretnych cz─Ö┼Ťci strony. B─Ödzie to wymaga┼éo nadania identyfikator├│w odpowiednim elementom.
  3. Dodaj podmenu do pozostałych pozycji menu, oprócz strony głównej.
  4. W regule CSS dotycz─ůcej elementu div reprezentuj─ůcego podmenu dodaj deklaracj─Ö top: 1px; i sprawd┼║, co si─Ö stanie. Umiesz wyja┼Ťni─ç dlaczego tak si─Ö sta┼éo? Umiesz za pomoc─ů w┼éasno┼Ťci pozycjonowania ustawi─ç podmenu we w┼éa┼Ťciwym miejscu?
  5. Na wielu stronach internetowych elementy menu, kt├│re maj─ů rozwijane podmenu, zawieraj─ů dodatkowy element (np. ma┼é─ů strza┼ék─Ö) wskazuj─ůcy, ┼╝e mo┼╝na je rozwin─ů─ç. Dodaj taki element do swojego menu.