Zbuduj Mega Menu z Ultimenu i Bootstrapem w Drupalu 8

Opublikowany: 2022-02-16

Jeden z naszych klientów zapytał jak zbudować mega menu w Drupal 8.

Mega menu to menu z nawigacją w wielu kolumnach. Szybko stają się trendem w projektowaniu stron internetowych.

Moduł Ultimenu umożliwia wstawianie bloków Drupala do menu. Możesz go łatwo użyć do budowania dość złożonych układów menu.

W tym samouczku dowiesz się, jak zbudować proste mega menu za pomocą modułu Ultimenu i Bootstrapa.

Celem klienta było zbudowanie mega menu podobnego do tego na obrazku poniżej:

Rozwijane mega menu powinny mieć 100% szerokości. Ich zawartość muszą być blokami Drupala.

Podejście Ultimenu

Moduł Ultimenu generuje blok dla każdego menu dodanego na stronie menu w instalacji Drupala (admin/structure/menu).

Możesz umieścić ten blok na ekranie Układ bloku jak każdy inny blok. Moduł zamienia elementy menu w dynamiczne regiony na stronie układu bloku.

W ten sposób możesz wstawiać bloki (niestandardowe bloki, widoki itp.) do tych regionów.

Blok zawierający regiony zawierające bloki:

Krok 1. Zainstaluj moduł

Zainstaluj moduł z kompozytorem:

composer require drupal/ultimenu

Po pobraniu kliknij Rozszerz i włącz moduł. Nie są wymagane żadne dalsze zależności:

Krok 2. Utwórz menu

Kliknij opcję Struktura > Menu .
Poszukaj głównej nawigacji
Kliknij menu Edycja .

Kliknij przycisk Dodaj łącze
Dodaj pozycje menu pierwszego poziomu:

Łącze Podróż wskazuje na route:<nolink> . Ten element nadrzędny ma tylko zawierać inne elementy:

Krok 3. Skonfiguruj blok Ultimenu

Kliknij opcję Struktura > Ultimenu .
Zakładka wybierz Główna nawigacja w pionowych blokach Ultimenu
Kliknij Zapisz konfigurację :

Kliknij regiony Ultimenu.
Wybierz Ultimenu:główne: Podróże

Ultimenu utworzy ten region dynamicznie na stronie Układ Bloku , dzięki czemu można w nim umieszczać bloki.

Kliknij Zapisz konfigurację :

Zakładka gadżetów Ultimenu posiada dodatkowe opcje konfiguracyjne. Nie będę sprawdzał żadnej z tych opcji. Przeczytaj dokumentację modułu, aby zrozumieć, jak działają te opcje, szczególnie jeśli tworzysz witrynę wielojęzyczną.

Krok 4. Blok obrazu

Aby umieścić obraz w bloku, musisz utworzyć niestandardowy typ bloku za pomocą pola Obraz .

Kliknąć Struktura > Układ bloku > Niestandardowa biblioteka bloków > Typy bloków .
Kliknij przycisk Dodaj niestandardowy typ bloku :

Nadaj typowi bloku odpowiednią nazwę.
Kliknij Zapisz:

Kliknij Zarządzaj polami.
Usuń pole Treść .
Kliknij Dodaj pole.
Dodaj pole Obraz .
Zapisz go z ustawieniami domyślnymi.
Kliknij Zarządzaj wyświetlaniem.
Ukryj etykietę Blokuj :

Kliknij Struktura > Układ bloku > Niestandardowa biblioteka bloków > Dodaj niestandardowy blok :

Kliknij Zablokuj z obrazem :

Prześlij obraz.
Kliknij Zapisz:

Krok #5. Blokowanie linków

Istnieje wiele sposobów na uzyskanie bloku z linkami w czterech kolumnach, na przykład z Widokami.

W tym samouczku pracuję z motywem Bootstrap. Użyję podstawowego bloku ze znacznikami i klasami Bootstrap.

Zapoznaj się z tym samouczkiem, aby dowiedzieć się, jak stworzyć podmotyw Bootstrap w Drupalu.

Ponownie kliknij Dodaj blok niestandardowy .
Tym razem wybierz blok podstawowy .
Nadaj blokowi odpowiednią nazwę.
Wybierz Pełny HTML jako format tekstu w edytorze.
Kliknij przycisk Źródło .
Wklej następujący kod w oknie edytora:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

Kliknij Zapisz.

Krok 6. Umieść blok Ultimenu

Kliknij opcję Struktura > Układ blokowy .
Wyłącz domyślny blok nawigacji głównej .
Umieść nawigację Ultimenu: Main w obszarze nawigacji (składanym).
Usuń zaznaczenie opcji Wyświetlaj tytuł .
Kliknij Zapisz blok .

Krok 7. Umieść klocki w obszarze „Podróże”

Przewiń w dół na dół strony.

Zobaczysz dynamicznie wygenerowany region, który przypisałeś podczas konfigurowania Ultimenu.

Kliknij Umieść blok :

Umieść niestandardowy blok obrazu w tym regionie.
Usuń zaznaczenie opcji Wyświetlaj tytuł.
Kliknij Zapisz blok.
Powtórz ten proces z blokiem znaczników Bootstrap :

W razie potrzeby zmień kolejność bloków.
Kliknij Zapisz bloki :

Teraz przejdź na pierwszą stronę swojej witryny i spójrz na menu. Wymagane jest kilka poprawek CSS.

Krok 8. CSS

Domyślnie plik bibliotek motywu podrzędnego wskazuje na plik style.css w folderze css/ w motywie podrzędnym Bootstrap.

Dodaj następujący kod do tego pliku:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

Do tej pory powinieneś już zauważyć, jak samodzielnie dostosować menu:

Streszczenie

Właśnie nauczyłeś się budować megamenu w Drupalu za pomocą modułu Ultimenu, Bootstrap i łatwego do zrozumienia podejścia „blok Drupala”.

Dziękuje za przeczytanie!