Kontrolowanie rozwijanej części poziomego menu CSS

W tej części kursu CSS nauczymy się kontrolować pewne cechy wyglądu części rozwijanej naszego poziomego menu CSS.

Poziome menu CSS wraz z jego częścią rozwijaną zostało zaprezentowane poniżej.

Z poprzedniej części kursu CSS wiemy, że elementy ul, które tworzą część rozwijaną poziomego menu CSS, są wyświetlone w pozycji absolutnej. Szerokość elementu HTML wyświetlonego w pozycji absolutnej jest uzależniona od zawartości jaka znajdzie się we wspomnianym elemencie HTML, dlatego gdy usuniemy właściwość width:100%; ze wspomnianych elementów ul, ich szerokość będzie uzależniona od zawartości danego elementu ul (a raczej tego co umieścimy w elementach li wspomnianego elementu ul).

#menu > li > ul {
  width:100%; /* DO TYMCZASOWEGO USUNIĘCIA */
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Od tej pory szerokość części rozwijanych danego menu CSS jest uzależniona od zawartości jaką umieścimy w elemencie li elementu ul (np. nieco dłuższy wyraz wraz z elementem a).

Przykład:

Jeżeli chcielibyśmy z jakiś powodów, aby tekst jaki umieścimy w elementach a został wyświetlony w jednym wierszu i tym samym rozszerzył on szerokość części rozwijanych danego menu CSS, to należy skorzystać z właściwości white-space wraz z wartością nowrap, które należy dodać do elementów a części rozwijanych naszego menu CSS.

#menu > li > ul > li > a {
  display:block;
  white-space:nowrap;
  text-decoration:none;
  padding:15px;
  color:#000;
}

Rezultat:

Jak możemy dostrzec w przykładzie, który został zaprezentowany powyżej, szerokość drugiej rozwijanej części menu CSS jest zbyt mała. Jeżeli chcemy, aby rozwijane części w naszym poziomym menu CSS miały zawsze jakąś minimalną wartość swojej szerokość, np. były one przynajmniej tak szerokie jak ich element rodzic li, to do elementów ul należy dodać właściwość min-width wraz z wartością 100%.

#menu > li > ul {
  min-width:100%;
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Najczęściej jednak możemy spotkać się z sytuacją, gdy rozwijana część poziomego menu CSS jest tak samo szeroka jak jej element rodzic. Efekt ten możemy w dość łatwy sposób uzyskać o czy była mowa w poprzedniej części kursu CSS. Wystarczy, że dodamy właściwość width:100%; do każdego elementu ul. Wspomniany element ul tworzy część rozwijaną i jest on wyświetlony w pozycji absolutnej (position:absolute;). Po dodaniu właściwości width:100%; do wspomnianego elementu ul jego szerokość będzie taka sama jak jego pierwszy element przodek, który jest wyświetlony w pozycji relatywnej (position:relative;). W naszym przykładzie tym pierwszym elementem, który posiada właściwość position:relative; jest po prostu element rodzic danego elementu ul.

#menu > li > ul {
  width:100%;
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Jeżeli z jakiś przyczyn chcemy, aby wszystkie elementy ul, które tworzą części rozwijane danego menu CSS, posiadały większą wartość swojej szerokości, np. 130%, to naszym oczom ukaże się następujący efekt.

#menu > li > ul {
  width:130%;
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

O ile wygląd pierwszej rozwijanej części danego menu jest do zaakceptowania, tak kolejnych dwóch niekoniecznie. Aby poprawić wygląd wspomnianych rozwijanych części danego menu CSS musimy zmienić ich pozycję za pomocą właściwości left, która jest przeznaczona między innymi dla elementów wyświetlonych w pozycji absolutnej, oraz która przesuwana wspomniany element od jego lewej krawędzi pozycji początkowej w prawo lub w lewo (gdy podamy ujemną wartość właściwości left).

Aby poprawić wygląd drugiej części rozwijanej w naszym menu CSS możemy ją wyśrodkować w dość prosty sposób. Wystarczy znaleźć ujemną wartość i dodać ją wraz z właściwością left do wspomnianej drugiej części rozwijanej. Wartość tą szukamy poprzez odjęcie wartości szerokości danej części rozwijanej (130%) od wartości szerokości elementu rodzica danej części rozwijanej (100%). Następnie wartość tą dzielimy na dwa, ponieważ chcemy aby po obu stronach danej części rozwijanej został zachowany taki sam rozmiar ((100% -130%) / 2 = -15%).

#menu > li:first-child + li > ul {
  left:-15%;
}

Rezultat:

Aby poprawić wygląd trzeciej części rozwijanej w naszym menu CSS wystarczy, że dodamy do niej właściwość left wraz z ujemną wartością, która jest nadmiarem wartości szerokości danego elementu ul względem jego elementu rodzica (100% -130% = 30%).

#menu > li:first-child + li + li > ul {
  left:-30%;
}

Rezultat:

W poprzedniej części kursu CSS dowiedzieliśmy się, że właściwość z-index wraz z wartością 1 zabezpiecza nas przed sytuacją, gdy bezpośrednio pod danym menu CSS znajdzie się element HTML wyświetlony w pozycji relatywnej. Zabezpieczenie to polega na tym, że wspomniany element wyświetlony w pozycji relatywnej nie przesłoni swoim obszarem elementu pozycjonowanego absolutnie, czyli rozwijanej części naszego poziomego menu CSS.

Przykład:

TEN ELEMENT - P - JEST WYŚWIETLONY W POZYCJI RELATYWNEJ

Oczywiście, gdy przykładowy element p będzie posiadał wyższy indeks, np. z-index:30; to przesłoni on swoim obszarem część rozwijaną naszego menu CSS, która jest wyświetlona w pozycji absolutnej.

OD TEJ PORY TEN ELEMENT - P - POSIADA INDEKS O WARTOŚCI 30

Gdy dodamy wyższy indeks do części rozwijanych naszego poziomego menu CSS (wyższy niż 30), wszystko wraca do normy.

#menu > li > ul {
  width:100%;
  display:none;
  position:absolute;
  z-index:9999;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

OD TEJ PORY TEN ELEMENT - P - POSIADA INDEKS O WARTOŚCI 30

W następnej części kursu CSS sprawimy, aby części rozwijane menu CSS stały się animowane.