Jak zbudować dynamiczny popover (pływające menu) w Divi za pomocą Popper.js

Czy słyszałeś kiedyś o bibliotece o nazwie popper.js ? Ta biblioteka pozwala tworzyć popovery w JavaScript. Korzystanie z okienek popover jest obecnie dość powszechne, zwłaszcza, że pomaga wyświetlić dalsze informacje dotyczące określonego elementu (przycisku, linku itp.). Powodem rozważania dynamicznego popover jest głównie zapewnienie, że wyświetla się we właściwym miejscu w odniesieniu do pozycji obiektu na ekranie. Konkretnie, jeśli temat znajduje się na dole ekranu, popover zostanie wyświetlony na górze. Jeśli znajduje się u góry ekranu, popover wyświetli się na dole itd.

W tym samouczku zamierzamy wykorzystać moc Popper.js w Divi do tworzenia dynamicznych okienek popover (pływające menu) po kliknięciu przycisku. Umożliwi to każdemu stworzenie popovera z elementami Divi, aby wyświetlić dowolną zawartość po kliknięciu przycisku. Upewnimy się również, że popover jest dynamiczny, ponieważ dostosuje swoją pozycję, aby zachować najbardziej idealną widoczność podczas interakcji użytkownika Twoja strona.

Oto ilustracja pozycjonowania tych popoverów…

Aby to osiągnąć, potrzebujemy niestandardowego CSS i JavaScript. Ale nadal możemy polegać na potężnych możliwościach projektowania Divi Builder, aby stworzyć popover za pomocą dowolnego elementu Divi.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zaczynajmy!

Podgląd pływającego menu

Oto krótkie spojrzenie na pływające menu, które zaprojektujemy w tym samouczku. Możesz zobaczyć, jak pozycja ruchomego menu zmienia się dynamicznie, gdy użytkownik przewija lub zmienia rozmiar przeglądarki. Nie przegap również małej strzałki, która jest również umieszczona tak, aby dynamicznie wskazywać na jej odniesienie (lub w tym przypadku przycisk).

Tworzenie popovera za pomocą Popper.js w Divi

Jak powiedzieliśmy wcześniej, użyjemy popper.js w Divi do stworzenia dynamicznie pozycjonowanego popovera, który zostanie ujawniony po kliknięciu na temat popovera (przycisk). W Divi możemy łatwo stworzyć pływające menu i przycisk. Później dodamy kod niezbędny, aby obie prace były harmonijne.

Sekcja

Zaczniemy więc od dodania identyfikatora klienta do zwykłej sekcji, która jest domyślnie gotowa. Otwórz ustawienia sekcji i dodaj następujący identyfikator:

• Identyfikator CSS: sekcja poppera

Utwórz Popover Popover z Divi Row

Następnie dodamy do sekcji wiersz z jedną kolumną. Ten wiersz stanie się naszym elementem popover Popper, który pojawia się po kliknięciu przycisku.

Otwórz ustawienia wiersza i zaktualizuj styl w następujący sposób:

• Kolor tła: #333333

• Szerokość rynny: 2
• Szerokość: 100%
• Maksymalna szerokość: 500px
• Padding: 0px góra, 0px dół, 0px lewo, 0px prawo
• Zaokrąglone rogi: 10px

Ponieważ ten wiersz stanie się naszym elementem popover popover, musimy dodać identyfikator CSS, który będzie służył jako selektor w naszym kodzie. Musimy również zadbać o to, aby widoczność pozostała na przelewie (jest ukryta przez zaokrąglone rogi).

Przejdź do zakładki Zaawansowane i zaktualizuj następujące elementy:

• Identyfikator CSS: wyskakujące okienko
• Przepełnienie poziome: widoczne
• Przepełnienie pionowe: widoczne

Dodajmy zawartość do wiersza popover

Możemy dodać dowolny moduł, który chcemy, do naszego wiersza, aby wypełnić pływające menu dowolną treścią. W tym przykładzie dodamy kilka przycisków do wiersza, który służy jako niestandardowe menu, które pojawia się w popoverze.

Aby rozpocząć, dodaj moduł przycisku do kolumny wiersza.

Teraz dodajmy trochę stylizacji do naszego przycisku. Zaktualizujemy ustawienia przycisków w następujący sposób:

• Wyrównanie przycisków: środek
• Użyj niestandardowych stylów dla przycisku: TAK
• Szerokość obramowania przycisku: 1px
• Kolor obramowania przycisku: #555555
• Promień obramowania przycisku: 10px
• Ikona przycisku: patrz zrzut ekranu
• Margines: 20px góra, 20px dół, 20px po lewej, 20px po prawej
• Wypełnienie: 0,5 em na górze, 0,5 em na dole, 2 em w lewo, 2 em w prawo

Ważne: Używamy marginesu na module do tworzenia odstępów zamiast używać przerw między wierszami, ponieważ dodamy strzałkę (za pomocą dzielnika), która musi być umieszczona na krawędzi wiersza (z pozycją bezwzględną). Każde dopełnienie wiersza lub kolumny odsunie strzałkę od krawędzi.

Teraz musimy dodać następujący niestandardowy fragment kodu CSS do elementu głównego, aby przycisk obejmował całą szerokość kolumny/wiersza:

display: block !important

Możesz teraz zduplikować przycisk dwa (lub więcej) razy, aby dodać kilka dodatkowych przycisków do naszego menu podręcznego.

Tworzenie strzałki popover

Popper.js obsługuje pozycjonowanie strzałek wraz z popoverem. Aby zbudować strzałkę, dodaj nowy rozdzielacz pod ostatnim przyciskiem w naszym rzędzie.

W ustawieniach dzielnika wybierz, aby nie wyświetlać dzielnika. Następnie w zakładce Zaawansowane dodaj następujący identyfikator CSS:

• Identyfikator CSS: strzałka poppera

Później użyjemy niestandardowego zewnętrznego CSS, aby stylizować i pozycjonować strzałkę.

Tworzenie przycisku popover (lub odniesienia)

Dwa kluczowe elementy popovera to element popover (lub popper) oraz temat, do którego popover się przyczepia. Możesz użyć dowolnego elementu Divi jako odniesienia, które generuje popover, ale w tym przykładzie użyjemy przycisku.

Tworzenie tematu dla Poppera: Przycisk

Zanim utworzymy nasz przycisk, musimy dodać nowy wiersz z jedną kolumną pod naszym wierszem popover.

Następnie dodaj nowy moduł przycisku do wiersza.

Zaktualizuj ustawienia przycisków za pomocą podstawowego stylu w następujący sposób:

• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #a043e8
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 10px

Następnie dodaj niezbędny identyfikator CSS, który pozwoli nam na celowanie i używanie przycisku jako późniejszego odnośnika popover:

• Identyfikator CSS: przycisk wyskakujący

Dodajmy kod

Teraz, gdy nasz popover i przycisk są gotowe, jesteśmy gotowi do dodania kodu, który sprawi, że magia się wydarzy.

Aby to zrobić, dodaj moduł kodu pod modułem przycisku referencyjnego w drugim wierszu.

Ważne jest, aby kod znajdował się na dole strony, aby działał.

Najpierw dodamy CSS.

W polu treści kodu dodaj znaczniki stylu, które są potrzebne do oblewania CSS w HTML. Następnie skopiuj i wklej następujący kod CSS między tagami  styleÂ:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Następnie musimy uzyskać dostęp do biblioteki popper.js poprzez dodanie skryptu importującego Popper.js z ich CDN (https://unpkg.com/@popperjs/core@2). Pod znacznikiem ending style wklej następujący skrypt w polu kodu.

Użyj następującego kodu src w tagu skryptu, aby zaimportować bibliotekę:

src="https://unpkg.com/@popperjs/core@2"

To powinno wyglądać tak:

Teraz zaimportujemy Popper.js przed dodaniem kodu, który będzie go używał. Tak więc, po skrypcie wskazującym na Popper.js, dodaj niezbędne znaczniki skryptu, aby zawinąć JavaScript, który musimy dodać. Następnie wklej następujący kod JavaScript pomiędzy tagami script.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

To wszystko! Wszyscy skończyliśmy. Sprawdźmy teraz efekt końcowy.

Podgląd końcowego wyniku

Aby zobaczyć wynik tego samouczka, musimy stworzyć trochę miejsca do przewijania, aby przetestować magię pozycjonowania popovera.

Aby to zrobić, otwórz ustawienia sekcji i dodaj margines w następujący sposób:

• Marża: 80vh góra, 80vh dół

Oto jak wygląda funkcjonalność:

Zwróć uwagę, jak pozycja popover (i strzałki) zmienia się dynamicznie, gdy użytkownik przewija lub zmienia rozmiar przeglądarki.

Zreasumowanie

Jeśli chcesz utworzyć popover za pomocą popper.js w Divi, musisz polegać na sporej części JavaScript, ale wynik jest tego wart. Dynamiczne pozycjonowanie popovera jest tak świetnym komponentem interfejsu użytkownika, który przyniesie korzyści każdej stronie internetowej. Co sądzisz o tym? Czy już próbowałeś? Daj nam znać.