Wyświetlanie menu na selektorze CSS

Poradnik Wszystkie plany 2 min czytania

Aplikacja umieszcza menu wewnątrz każdego pasującego elementu, zastępując jego zawartość. Używaj tej opcji w niestandardowych lub mocno zmienionych szablonach, w których Zastąp automatycznie i Zastąp istniejące menu nie działają, dla konkretnego miejsca lub dla menu tylko na komputer albo tylko na telefon.

Notatka

Aplikacja zaleca tę opcję programistom lub wtedy, gdy inne opcje nie działają. Nie czujesz się pewnie z selektorami CSS? Skontaktuj się z nami, a bezpłatnie zainstalujemy menu za Ciebie.

Konfigurowanie selektorów CSS

1. Wybierz Pokaż menu na tym selektorze CSS

   W edytorze menu kliknij kartę Ustawienia na lewym pasku. W sekcji Pozycja wybierz Pokaż menu na tym selektorze CSS.

   

   Pokaż menu na tym selektorze CSS z dwoma polami selektorów

2. Wpisz selektory

   Wypełnij dwa pola opisane w sekcji Ustawienia. Szare #SiteNav i #AccessibleNav to teksty zastępcze, a nie zapisane wartości.

3. Zapisz i opublikuj

   Kliknij Zapisz, a potem opublikuj menu. Sprawdź sklep na komputerze i na telefonie.

Ustawienia

Selektor CSS menu głównego

Element zawierający menu na komputer, np. #SiteNav, .header__inline-menu lub nav.main-menu. Zostaw puste, aby wyświetlać menu tylko na telefonie.

Selektor CSS menu mobilnego

Element zawierający menu mobilne, np. #AccessibleNav lub .menu-drawer. Zostaw puste, aby zachować menu mobilne szablonu (tylko komputer).

• Kilka elementów — oddziel selektory przecinkami, np. .header__inline-menu, .sticky-header nav. Menu trafia do każdego dopasowania.
• Jeden element dla obu układów — wpisz ten sam selektor w obu polach. Aplikacja przełącza go między układem na komputer i na telefon w zależności od rozmiaru ekranu.
• Wybierz kontener, a nie pojedynczy link — dopasuj element obejmujący całe menu (zwykle <nav> lub <ul>), inaczej menu trafi do wnętrza jednego elementu.
• Wybieraj stabilne selektory — identyfikatory lub klasy szablonu, np. .header__inline-menu. Generowane selektory, np. body > div:nth-child(3) > …, przestają działać po zmianie szablonu.

Znajdowanie selektora CSS

Możesz też kliknąć Jak znaleźć selektor CSS swojego menu? pod polami.

1. Zbadaj menu

   Otwórz sklep w Chrome, kliknij menu prawym przyciskiem myszy i wybierz Zbadaj.

2. Znajdź kontener menu

   W panelu Elements najeżdżaj kursorem na znaczniki. Znajdź najbliższy <nav> lub <ul>, którego podświetlenie obejmuje całe menu.

3. Skopiuj selektor

   Użyj # z jego id (#SiteNav) lub . z czytelną klasą (.header__inline-menu). W przeciwnym razie kliknij znacznik prawym przyciskiem myszy, wybierz Copy > Copy selector i wklej go do aplikacji.

4. Powtórz dla telefonu

   Kliknij ikonę urządzenia w DevTools, wybierz telefon i otwórz menu mobilne (ikona hamburgera). Powtórz kroki, aby uzyskać selektor mobilny.

Wskazówka

Przetestuj selektor przed zapisaniem: w Console w DevTools uruchom document.querySelectorAll('your-selector'). Pusta lista oznacza, że selektor jest błędny.

Potrzebujesz menu w miejscu, w którym szablon nie ma żadnego menu? Zobacz Dodawanie własnej pozycji menu.

Powiązane strony

• Dodawanie własnej pozycji menuWyświetl menu dokładnie tam, gdzie chcesz, dodając własny kontener do kodu szablonu.
• Czy mogę używać różnych menu na komputerze i telefonie?Pokazuj jedno menu na komputerze, a inne na telefonie, albo ukrywaj wybrane elementy na danym urządzeniu.
• Dlaczego moje menu nie wyświetla się w sklepie?Lista kontrolna krok po kroku, gdy menu nie ma w sklepie lub wygląda nieprawidłowo.

Czy to było pomocne?

Zgłoś problem