Jak upravit mobilní menu ve Webflow

Jednoduché a intuitivní navigační menu je jedním z nejdůležitějších designových prvků na vašem webu. Funguje jako mapa, která odvádí návštěvníky pryč z hlavní stránky. S rostoucím počtem lidí, kteří používají internet na svých mobilních zařízeních, by vaše webové stránky měly mít také navigační nabídku vhodnou pro mobily.

Naštěstí Webflow usnadnil přidání skládacího hamburgerového menu, který zjednoduší váš mobilní web. Pokračujte ve čtení a zjistěte, jak upravit tuto mobilní nabídku ve Webflow.

Jak přidat navigační lištu

Nabídka hamburgerů je zásadním designovým prvkem při řešení omezeného horizontálního prostoru. To eliminuje potřebu objemné pevné navigační lišty, která zabírá cenné místo.

Ve Webflow je tato nabídka a její funkce zabudovány do prvku NavBar. Chcete-li přidat tento prvek do svého návrhu, musíte provést čtyři jednoduché kroky:

Jak upravit mobilní menu

Jakmile na svůj web přidáte navigační lištu, můžete tuto nabídku stylizovat a personalizovat několika různými způsoby.

Jak přidat další odkazy do nabídky

Prvek navigační lišty obsahuje tlačítko nabídky a navigační nabídku, přičemž ta druhá obsahuje navigační odkazy. Když jej přidáte do svého návrhu, bude zde několik zástupných symbolů odkazů, které můžete odstranit nebo upravit pomocí odkazů na svůj web.

Chcete-li přidat další navigační odkazy, postupujte takto:

Nyní, když máte dostatek odkazů na všechny relevantní stránky na webu, je čas provést skutečné propojení.

Jak změnit animaci nabídky

Ve Webflow můžete také změnit způsob zobrazení mobilní nabídky, když návštěvníci kliknou na tlačítko nabídky. Můžete si vybrat ze tří typů animací odhalení:

Chcete-li nastavit požadovanou animaci rozšíření, postupujte takto:

V části Nastavení NavBar můžete také spravovat následující:

Všimněte si, že trvání přechodu se měří v milisekundách.

Jak změnit styl menu

Webflow usnadnil stylování jakékoli části navigační lišty, což usnadňuje začlenění mobilní nabídky do designu vašeho webu.

Chcete-li upravit styl tlačítka nabídky, postupujte takto:

Panel Styl umožňuje změnit každý aspekt tlačítka nabídky. Nejčastěji návrháři mění barvu a velikost pozadí tlačítka.

Chcete-li změnit barvu pozadí, postupujte takto:

Pokud chcete změnit velikost ikony hamburgeru, postupujte takto:

Můžete také změnit barvu ikony ve výše uvedeném poli označené písmenem A a barevnou kapkou.

I když existuje mnoho způsobů, jak přizpůsobit tlačítko nabídky, nemůžete je nahradit textovým prvkem nebo vlastním obrázkem.

Snadná mobilní navigace

Při navrhování mobilního menu chcete maximálně využít poměrně omezený prostor. Snažte se tedy nepřetěžovat nabídku možností, abyste návštěvníky nezmátli. Také se ujistěte, že položky nabídky jsou krátké, ostré a snadno čitelné.

Poté si můžete pohrát se stylem a animací nabídky, aby vaše návštěvníky zaujala na každém kroku.

Zkusili jste na svůj web přidat mobilní menu? Kolik možností jste zahrnuli? Dejte nám vědět v komentářích níže.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.