Jak zaprojektować menu strony internetowej

Niniejszy przewodnik skupia się na projekcie menu - jak ono wygląda i jak działa. Jeśli chcesz dowiedzieć się, jak zaprojektować menu witryny, wyświetlić je na każdej stronie witryny lub utworzyć menu nawigacyjne dla określonej strony internetowej, zalecamy przeczytanie innego przewodnika:

Jak to wygląda:
Takie menu jest przypięte na górze strony, aby nie odwracać uwagi odwiedzających witrynę od treści, i mogą je łatwo znaleźć w razie potrzeby, ponieważ jest przymocowane w określonym miejscu na stronie.

Jak skonfigurować:

Dodaj blok ME301 do strony i zastosuj następujące ustawienia:

Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.

Jak to wygląda:
Takie menu jest zawsze widoczne na stronie i można łatwo uzyskać do niego dostęp z dowolnego miejsca na stronie. Zwykle ma przezroczyste tło u góry strony (na okładce), które staje się nieprzezroczyste po przewinięciu.

Jak skonfigurować:

Dodaj blok ME301 do strony i zastosuj następujące ustawienia:

Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Tło menu → Kolor tła menu. Wybierzkolor.
Tło menu→ Kry cie tła menu: 0%.
Tło menu → Krycie tła menu przy przewijaniu: 80%.

Jak to wygląda:
To menu jest podobne do opisanego powyżej. To, co je wyróżnia, to kolejne menu pojawiające się po przewinięciu i zawierające jeszcze więcej elementów. Na przykład górne menu nawigacyjne zawiera logo, kilka pozycji menu prowadzących do różnych stron witryny i kilka linków do mediów społecznościowych. Gdy użytkownik przewija stronę, pojawia się kolejny pasek menu, zawierający logo, wezwanie do działania i przycisk oddzwaniania.

Jak to skonfigurować:
Dodaj dwa bloki ME301 do strony i zastosuj następujące ustawienia:

Menu One (znajdujące się na górze strony)
Ustawienia główne → Zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.

Menu drugie (pojawiające się przy przewijaniu)
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Ustawienia główne → Ujawnieniemenu po przewinięciu N pikseli
Ujawnienie menu po przewinięciu strony w dół w pikselach: 600px.
Tło menu → Kolor tła menu. Wybierz kolor.
Tło menu → Krycie tła menu: 70%.

Jak to wygląda:
Menu hamburgera to trzy poziome linie u góry ekranu. Kiedy użytkownik je kliknie, otwiera się, aby odsłonić menu nawigacyjne.

Do czego można go użyć:
Takie menu jest idealne dla Twojej witryny, jeśli chcesz, aby odwiedzający skupili się na treści bez rozpraszania się innymi elementami projektu. Menu hamburgera jest zwykle używane w mobilnej wersji strony internetowej. Możesz skonfigurować sposób wyświetlania menu na różnych urządzeniach.

Na przykład, możesz zdecydować się na zwykłe menu, które będzie wyświetlane tylko w wersji desktopowej witryny i sprawić, że menu hamburgera będzie widoczne wyłącznie na urządzeniach mobilnych.

Jak skonfigurować:
Dodaj blok ME401/402/403/404/405 do strony, ustaw zachowanie pozycji menu, kolor ikony menu, kolor tła menu i kolor tła elementów menu.

Na przykład można zastosować następujące ustawienia:
Ustawienia główne → Zachowanie pozycji menu: Fixed on scroll.
Ikona menu → Kolor. Wybierz czarny.
Tło menu → Kolor tła zwiniętego menu. Niech będzie przezroczyste.
Tło menu → Kolor tła rozwiniętego menu . Wybierz biały.

Jak to skonfigurować:

Dodaj pozycje podmenu dla głównego bloku lub użyj kombinacji menu ME301 (lub dowolnego innego bloku z pozycjami menu) i ME601.

Pozycje podmenu głównego bloku

Dodaj do strony dowolny blok menu zawierający pozycje menu.

Przejdź do zakładki Zawartość bloku → Lista pozycji menu → Dodaj pozycje podrzędne, a zobaczysz ikony plusa, które pojawią się obok pozycji menu.

Kliknij ikonę plusa obok pozycji, dla której chcesz dodać pozycję podrzędną, wprowadź tytuł pozycji podrzędnej i przypisz łącze.

Kliknij ikonę plusa ponownie, aby dodać nowy podpunkt.

Podpunkty menu będą wyświetlane po najechaniu kursorem jako menu rozwijane. W wersjach mobilnych menu można otworzyć jednym dotknięciem.

Ważne: sam element menu głównego nie będzie klikalny. Jeśli chcesz, aby był klikalny, utwórz zduplikowany element podrzędny w menu rozwijanym.

Blok ME 601

Dodaj blok ME301 do strony, skonfiguruj menu zgodnie z powyższym opisem i dodaj blok ME601 (Menu: drugi poziom).

Blok ME601 umożliwia dodawanie elementów podrzędnych do elementów menu głównego. Będą one wyświetlane po najechaniu kursorem jako menu rozwijane. W wersjach mobilnych menu można otworzyć dotknięciem.

Jak to działa:
1) W bloku ME601 wpisz link, który wygląda jak #submenu:more
2) W menu głównym: W polu Link, obok pozycji, dla której chcesz utworzyć podpozycje, wpisz #submenu:more.

Ważne: sama pozycja menu głównego nie będzie klikalna. Jeśli chcesz, aby był klikalny, utwórz zduplikowany element podrzędny w menu rozwijanym.

Uwaga: możesz użyć dowolnego słowa dla "#submenu:more", np: #submenu:portfolio или #submenu:aboutus

Jak to wygląda:
Aktywna zakładka umożliwia użytkownikom przeglądanie powiązanych z nią treści bez opuszczania strony internetowej.

Do czego można jej użyć:
Zakładki umożliwiają wyświetlanie kilku kategorii tego samego typu treści, takich jak różne kategorie prac w portfolio.

Jak to skonfigurować:
Dodaj blok ME602 lub ME603 do strony. Bloki te można wykorzystać do tworzenia zakładek i wyświetlania treści, gdy użytkownik kliknie zakładkę na tej samej stronie. Poniżej należy dodać bloki w sekwencji, która zmieni się, gdy użytkownik kliknie określoną zakładkę.

Jak to działa:
1. Dodaj tytuły zakładek w panelu Content bloku ME602 lub ME603.
2. Dodaj identyfikatory bloków, które powinny być widoczne po kliknięciu zakładki (oddziel je przecinkiem, bez spacji).

Uwaga: Możesz skopiować identyfikator bloku w panelu Settings bloku - przewiń w dół do dołu panelu, aby go znaleźć.

Jak to wygląda:
Kliknięcie kropki w menu powoduje przejście do określonego bloku na stronie

Do czego można tego użyć:
Do przekierowywania użytkowników do określonej sekcji na stronie z dużą ilością treści.

Jak wygląda:
Rozwijane menu paska bocznego zawierające sekcje i podsekcje. Menu ma stałą pozycję, która pozwala na adresowanie go z dowolnego miejsca na stronie.

Do czego można go używać:
Umożliwia tworzenie szczegółowej nawigacji dla wewnętrznych sekcji i podsekcji witryny, a także dodawanie wyszukiwania stron.

Jak skonfigurować:

Dodaj blok ME901 do strony, skonfiguruj style wyświetlania menu za pomocą ustawień bloku.

Blok ME901 umożliwia dodawanie podsekcji do pozycji menu głównego. Łącza do podsekcji należy określić w zakładce Zawartość bloku > Lista pozycji menu.

Jako łącze należy podać albo pełny adres strony, w tym http://, albo adres względny - tylko nazwę strony (np. /page7890.html или /about).

Aby utworzyć nawigację na stronie, można użyć linków zakotwiczonych (takich jak #contacts). Aby dodać kotwicę do strony, użyj bloku łącza kotwicy z kategorii Inne.

Menu pozostaje otwarte, jeśli szerokość ekranu przekracza 1500 px.

Jak to skonfigurować:
Dodaj blok ME401 do strony → Zakładka Zawartość → Koszyk, Wyszukiwanie i Ulubione → zaznacz pola wyboru, aby wyświetlić potrzebne ikony w menu.

Zaznacz pole wyboru "Nie pokazuj natywnych przycisków widżetów", aby wyświetlać ikony tylko w menu.

Następnie dodaj blok koszyka na zakupy ST100, blok widżetu wyszukiwania T985 i blok ulubionych ST110 i opublikuj stronę.

Gotowe.

Ta funkcja działa dla wszystkich bloków menu oznaczonych numerami ME4XX.

Opcje wyświetlania:
Jeśli chcesz wyświetlać w menu zarówno ikony, jak i przycisk widżetu Ulubione, usuń zaznaczenie opcji "Nie pokazuj natywnych przycisków widżetu" na karcie Zawartość bloku ME401.

Możesz ukryć ikonę widżetu dla bloków ST100 Koszyk i T985 Wyszukiwanie - w zakładce "Więcej ustawień" w ustawieniach bloku zaznacz pole wyboru "Nie pokazuj przycisku widżetu". Opublikuj stronę.

Gotowe! W menu wyświetlane są trzy ikony, a dla Ulubionych dostępny jest osobny widżet. W podobny sposób można skonfigurować widoczność koszyka lub widżetu wyszukiwania.

Możesz utworzyć własne menu w Zero Block Block, konfigurując elementy tak, jak chcesz, a następnie naprawiając blok.

Aby to naprawić, przejdź do edycji Zero Block Settings → Position and Overflow → wybierz wartość Fixed, aby naprawić blok.

Możesz ustawić blok na górze lub na dole strony, a także skonfigurować go tak, aby pojawiał się w X px (Appear Offset). W tym przypadku można wybrać opcję wyglądu animacji - Fade in. Może to być przydatne, na przykład, jeśli chcesz, aby nagłówek strony pojawiał się w kilku przewinięciach, a nie od razu.

Oto kilka kluczowych opcji projektowania menu. Jeśli masz nowe pomysły i chcesz się nimi podzielić, wyślij link do swojej strony internetowej na adres team@tilda.cc z "Projekt menu" w temacie. Dziękujemy!

Powodzenia w eksperymentach projektowych!