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.

How to set it up:
Add two ME301 blocks to the page and apply the following settings:

Menu One (located on top of the page)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.

Menu Two (appearing on scroll)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu after scrolling N pixels
Reveal menu when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 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.

How to set it up:
Add a ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, the menu background color, and the menu items background color.

For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu icon → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.

How to set it up:

Add submenu items for the main block or use a combination of ME301 menu (or any other block with menu items) and ME601.

Main block submenu items

Add any menu block that contains menu items to the page.

Go to the Content tab of the block → List of menu items → Add subitems, and you will see the plus icons that will appear near the menu items.

Click the plus icon near an item that you need to add a subitem for, enter a subitem title, and assign a link.

Click the plus icon again to add a new subitem.

Menu subitems will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

Important: the main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

ME 601 block

Add the ME301 block to the page, configure the menu as described above, and add the ME601 block (Menu: second level).

The ME601 block allows you to add subitems to the main menu items. They will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

How it works:
1) In the ME601 block, write a link that looks like #submenu:more
2) In the main menu: In the Link field, near the item you want to create subitems for, write #submenu:more.

Important: main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

Please note: you can use any word for "#submenu:more", such as: #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.

How to set it up:
Add a ME602 or ME603 block to the page. You can use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, you need to add blocks in a sequence that will change when the user clicks a particular tab.

How it works:
1. Add tab titles in the Content panel of the ME602 or ME603 block.
2. Add the blocks' IDs that should be visible when you click the tab (separate them with a comma, no space).

Note: You can copy the block's ID in the Settings panel of the block — scroll down to the bottom of the panel to find it.

What it looks like:
By clicking the dot in the menu, you jump to a specific block on the page

What you can use it for:
For redirecting users to a specific section on the page with large amount of content

What it looks like:
Dropdown sidebar menu that contains sections and subsections. The menu has a fixed position that allows you to address it from any place on the page.

What you can use it for:
It allows you to create detailed navigation for website internal sections and subsections, as well as add search for pages.

How to set it up:

Add the ME901 block to the page, configure the styles of how the menu should be displayed by using the block settings.

The ME901 block allows you to add subsections to the main menu items. You need to specify the links to subsections in the Content tab of block > List of menu items.

As a link, you need to specify either the full address of the page including http:// or relative address — just the name of the page (such as /page7890.html или /about).

To create the navigation within the page, you can use anchor links (such as #contacts). To add an anchor to the page, use the Anchor link block from the Other category.

The menu stays open if the screen width is more than 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.

You can create your own menu in Zero Block by configuring the elements as you like it and and then fixing the block.

To fix it, go to editing the Zero Block Settings → Position and Overflow→ select the Fixed value to fix the block.

You can fix the block at the top or at the bottom of the page, as well as configure it so that it appears in X px (Appear Offset). In this case, you can select an option for animation appearance — Fade in. This can be useful, for example, if you want that the website header appears in a few scrolls and not at once.

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!