W tym materiale pokaże krok po kroku, jak zbudować menu wielopoziomowe przy użyciu poznanych w poprzednich sekcjach technik HTML i CSS. Podczas starania się o prace na stanowisko związane z frontendem, takie zadanie może się pojawić do wykonania. Materiał podzieliłem na kilka mniejszych sekcji.
Struktura projektu
Każdy projekt zaczynamy od zbudowania szkieletu HTML dla naszej strony. Tak więc zaczynamy!
- Dodajemy podstawową strukturę stron do pliku index.html. Podpinamy do niej plik style.css.
- Między znacznikami
bodydodaj elementnav. - Wewnątrz powyższego elementu dodaj nieuporządkowaną listę wraz z kilkoma pozycjami (
li). Do nich dodaj przykładowe teksty, np. O nas, Galeria. - Przeglądarki dodają nam domyślne style do list. Dla selektora
ulmusisz wyzerowaćpaddingi margines oraz wyłączyć punktory (za pomocą właściwościlist-style-type. - W środku każdej pozycji na liście powinien znaleźć się też znacznik
aktóry póki co nigdzie nie będzie prowadził (atrybuthrefrówny#).
Podstawowy plik HTML jest już gotowy. Przejdźmy do pliku CSS. Nalezy się zastanowić, jak zdefiniować właściwości CSS. W pierwszej kolejności dodamy style, które będą miały zastosowanie w całym dokumencie.
- Wykonajmy import z Google Fonts czcionkę “Quicksand”, dodaj ją do pliku. (zrób to podobnie jak w poprzednim module).
- Dodaj następujące style dla znacznika body:
body {
font-family: "Quicksand";
margin: 0;
background: lightblue;
}
Poziome menu pierwszego poziomu
Następnym krokiem jest stworzenie menu pierwszego poziomu.
- Kontynuujemy edycje powyższego projektu. Przejdź do pliku style.css. Dodaj deklaracje
display: inline-block;dla elementów listyliznajdujących się wewnątrz elementunav. Taki zapis sprawi, że elementy listy wyświetlą się poziomo. - Dodaj style odpowiedzialne za wygląd nawigacji. Dla znacznika
navnadaj przykładowy kolor. Następnie wyśrodkuj tekst. - Ostyluj przyciski wewnątrz listy – czyli tagi
a. Określ ich wysokość na50px. Elementajest domyślnie inlinowe więc należy mu dodaćdisplay: inline-block;. Dodaj wysokość linii (line-height) również na50px. Taki zabieg wyśrodkuje zawartość w pionie. Następnie dodajpadding: 0 10px;. Sprawi to, że elementy odłączą się od siebie. - Do dodanych linków dodaj
color: white;oraztext-decoration: none;. - Widzimy już zadawalający efekt pierwszego menu. Nawigacja jednak prosi się o jakiś efekt
:hoverna przyciskach. Dodaj przykładowy kolor tła przycisku.
Rozwijane menu drugiego poziomu
Nadszedł czas na dodanie menu drugiego poziomu. Wyświetlanie będzie następowało po najechaniu na link pierwszego rzędu. Zaczynamy od HTML.
- W pliku index.html wewnątrz każdego elementu
li, za elementemadodaj elementulwraz z kilkoma pozycjami oraz linkami, tak jak wcześniej. Element ten powinien znaleźć się na tym samym poziomie zagnieżdżenia, co wcześniej dodane linki. - Przejdźmy do pliku style.css. Ustawmy elementy naszego menu drugiego poziomu w pionowym rzędzie. Aby to zrobić należy dodać selektor
nav ul ul lioraz przypisać mu odpowiednią własność –display: block;. - W celu ukrycia menu niższego poziomu, stwórz regułę
display: none;dla list znajdujących się wewnątrz innych list w panelu nawigacji. Należy skorzystać w tym celu ze znanych nam zagnieżdżonych selektorów CSS.
Wyświetlanie listy menu drugiego poziomu
Popatrzmy na strukturę naszego menu. Link drugiego poziomu jest elementem listy pierwszego poziomu. W celu wybrania listy drugiego rzędu stworzylibyśmy następujący selektor: nav li ul {}.
W taki sposób wybieramy listy ul będące wewnątrz elementów listy pierwszego poziomu – tzn. będące wewnątrz taga li. Chcemy wyświetlić te listy dopiero w momencie, gdy użytkownik najedzie kursorem na element li, zatem nasz selektor powinien wyglądać następująco: nav li:hover ul {...}. Do wyświetlenia listy wystarczy ustanowienie odpowiedniej wartości właściwości display wewnątrz takiego selektora – w tym wypadku innej niż none.
- Stwórz selektor wybierający listy drugiego rzędu po najechaniu myszką na element listy pierwszego rzędu – tak jak w powyższym opisie.
- Umieść właściwość
display: block;wewnątrz utworzonego selektora. Menu w tym momencie zachowuje się nietypowo. Kolejnym krokiem będzie naprawa tego stanu. - Aby lista drugiego poziomu nie rozpychała się nam nawigacji, musimy ją “wyciągnąć ją z obiegu”. Uzyskamy to dzięki dodaniu (tej zagnieżdzonej liście)
position: absolute;. - Ostatnim zadaniem do wykonania jest nadanie tła liście drugiego poziomu.
- Można już by tak zostawić, ale jak najedziemy na linki drugiego poziomu to widzimy, że ich podświetlenie nie jest na całą szerokość nawigacji drugiego poziomu. Dzieje się tak przez wzgląd na to, że linki (których tło zmieniamy po najechaniu) nie zajmują całej dostępnej przestrzeni. Aby wymóc odpowiedniego efektu należy dodać właściwość
display: block;.
Gotowe! Menu w takiej konfiguracji pojawiać się będzie, po najechaniu kursorem na link pierwszego rzędu.
Wszystkie pytania proszę kierować na mojego Messengera, lub bezpośrednio na emaila: danielminschinski@gmail.com
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA