Czy kiedykolwiek przeglądałeś stronę internetową i odkryłeś, że menu nawigacyjne jest zawsze widoczne u góry?

Zasadniczo menu nawigacyjne są wyświetlane w taki sposób, aby znikały podczas przewijania strony. Zawsze widoczne menu nawigacyjne są ruchome i nie ma znaczenia, w jaki sposób użytkownik przewija w dół.

W tym samouczku pokażemy, jak łatwo utworzyć pływające menu na blogu WordPress.

Jeśli nie utworzyłeś jeszcze strony internetowej lub bloga na WordPress, zapraszamy do zapoznania się z artykułem Jak zainstalować bloga WordPress w 7 krokach, Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu

Jeśli tak się stanie, przejdźmy do tego, co nas dzisiaj dotyczy.

Metoda 1: Jak dodać pływające menu w WordPress za pomocą wtyczki

Ta metoda jest łatwiejsza i szybsza. Jeśli nie skonfigurowałeś jeszcze menu nawigacji, możesz naucz się jak to zrobić.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę " Przyklejone menu (lub wszystko!) W trakcie przewijania ”. Jeśli nie wiesz, jak zainstalować wtyczkę, to ty może przeczytać nasz tutorial.

Po aktywacji musisz odwiedzić „ Ustawienia »Sticky Menu Aby skonfigurować ustawienia tej wtyczki.

Najpierw musisz wprowadzić identyfikatory CSS menu nawigacyjnego, które chcesz ustawić jako pływające.

Aby znaleźć używany arkusz CSS, musisz skorzystać z narzędzia „inspekcja” przeglądarki.

Wejdź na swoją stronę i przesuń mysz do menu nawigacji. Następnie kliknij prawym przyciskiem myszy i wybierz „Sprawdź”.

Idź dalej, odkrywając Jak dostosować WordPress z żółtym ołówkiem

Spowoduje to podział (domyślnie) ekranu przeglądarki i będzie można zobaczyć kod źródłowy menu nawigacyjnego. Musisz znaleźć linię podobną do tej:

W tym przykładzie identyfikator CSS naszego menu nawigacyjnego to „ Nawigacja strony ".

Śmiało i wprowadź identyfikator CSS menu w ustawieniach wtyczki w następujący sposób: „# site-navigation”.

Następną opcją w ustawieniach wtyczki jest ustawienie odstępu między górną częścią ekranu a pływającym menu nawigacyjnym. Możesz użyć tego ustawienia, jeśli menu nakłada się na element, którego nie chcesz ukrywać. W przeciwnym razie zignoruj ​​to ustawienie.

Następnie należy kliknąć pole obok opcji: „Check Bar Admin”. Pozwala to wtyczce dodać trochę miejsca na pasek narzędzi WordPress, który jest dodawany dla zalogowanych użytkowników.

Następna opcja na stronie ustawień pozwala ukryć menu nawigacyjne, jeśli użytkownik odwiedza Twoją witrynę przy użyciu mniejszego ekranu, na przykład urządzenia mobilnego.

Możesz przetestować, jak to menu jest wyświetlane na urządzeniach mobilnych i tabletach. Jeśli ci się to nie podoba, możesz dodać 780px w tej opcji.

Odkryj też Jak stworzyć elastyczne menu dla telefonu WordPressa

Nie zapomnij kliknąć „ Zapisz ustawienia Aby zapisać zmiany.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć pływające menu nawigacji w akcji.

Metoda 2: Jak ręcznie dodać menu nawigacyjne

Ta metoda wymaga dodania niestandardowego kodu CSS do Twojego WordPress.

Przede wszystkim musisz odwiedzić " Wygląd> Dostosuj Aby uruchomić program WordPress Customizer.

Kliknij na Dodatkowy CSS W lewym okienku dodaj ten kod CSS.

# site-navigation {background: #fff; Wzrost 60px; Z-Index: 170; margines: 0 auto; border-bottom: 1px solid #dadada; szerokość: 100%; Pozycja: stała; top: 0; left: 0; po prawej: 0; wyrównanie tekstu: środek; }

Zamień „ # Nawigacja strony Według identyfikatora menu nawigacyjnego i kliknij przycisk « Enregistrer ".

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć pływające menu nawigacji w akcji.

Jeśli menu nawigacyjne zwykle pojawia się po nagłówku witryny, ten kod CSS może nakładać się na tytuł i nagłówek witryny.

Można to łatwo zmienić, dodając margines w obszarze nagłówka za pomocą następującego kodu:

branding {margin-top: 60px; }

Tutaj kończy się nasz samouczek, teraz będziesz mógł stworzyć lub dodać pływające menu na swojej stronie.

Jeśli szukasz innych WordPress wtyczki które pozwolą Ci zarządzać menu, oto kilka WordPress wtyczki premia przeznaczona na to zadanie. 

1. Menu Bohaterów

Ta wtyczka umożliwia stworzenie własnego niestandardowego menu WordPress w kilku dość łatwych krokach. W szczególności pozwala łatwo i intuicyjnie stworzyć eleganckie i profesjonalne menu WordPress. Od najbardziej złożonego, bogatego w funkcje mega menu, po najprostsze menu rozwijane, WordPress Plugin HeroMenu konfiguruje dowolny rodzaj menu i uruchamia je w ciągu kilku minut.

Pod względem funkcji oferuje między innymi: doskonale funkcjonalny na PC, tablecie i smartfonie, łatwy w użyciu, konfigurowalną zawartość, niestandardowy CSS do dodawania własnych stylów menu, projektant mega menu, obsługiwane przeglądarki: Chrome, Firefox, Safari , Opera, IE9 i więcej.

Pobierz | Demo | hosting

2. Zręczne menu

Zręczne menu to nie tylko wtyczka menu do WordPress. Można go używać do tworzenia wielu poziomów menu w nieograniczony sposób, a także pasków bocznych z bogatą zawartością, wieloma opcjami stylów i animowanymi efektami.

Każdy poziom menu można dostosować za pomocą kolorów tła, obrazów, filmów, niestandardowych czcionek i nie tylko. Ta wtyczka jest całkowicie responsywna i ma ponad 45 animacji dla elementów menu.

Pobierz | Demo | hosting

3. 8Degree Menu Fly

Menu 8 stopni Fly to WordPress Plugin premium, który pozwala na dodanie menu płótna do Twojej witryny, aby nadać jej wygląd, który w prosty sposób podkreśli Twoje informacje. Używa domyślnej funkcji menu WordPress do tworzenia swoich menu.

Będziesz mógł dodawać dodatkowe elementy do domyślnych pozycji menu, takie jak ikony, slogany menu, pseudo-grupujący nagłówek i długi opis. Jest również wyposażony w edytor WYSIWYG, który pomaga uchwycić długi opis w przyjazny dla użytkownika sposób. Za pomocą tego edytora możesz także używać skrótów.

Pobierz | Demo | hosting

Inne zalecane zasoby

Jeśli chcesz pójść dalej w tworzeniu lub dostosowywaniu menu swojego bloga lub witryny, zalecamy również przejrzenie poniższych linków.

• Jak nadać styl Twoim menu nawigacyjnemu
•  Jak dodać atrybut title w menu WordPress
• Wtyczki 8 WordPress do tworzenia megamenu na swoim blogu

Wnioski

Tutaj! To wszystko w tym samouczku, mam nadzieję, że pozwoli ci dodać pływające menu na twoim blogu WordPress. Zapraszamy na udostępnij ten artykuł znajomym w sieciach społecznościowych.

Jeśli masz jakieś sugestie lub uwagi, będą one mile widziane. A jeśli jesteś nowy w WordPress, skonsultuj to zasób.

...