Vytvořte chytřejší citlivé navigační menu pomocí tohoto jQuery Pluginu

Každé moderní místo potřebuje citlivé rozvržení a použitelnou navigaci. To je dáno.

Ale hamburgerové menu mohou jít jen tak daleko a oni radikálně změnit použitelnost pro různé velikosti obrazovky. Lepší způsob, jak to zvládnout, je postupně skrývá spojení s pluginem jako je OkayNav.

Tento bezplatný plugin jQuery přidává velmi jednoduchou funkci menu na libovolnou stránku a topokrývá navigační položky, založené na různých výřezech. Uživatelé smartphonů tak mají jediné menu hamburger, ale uživatelé tabletů mohou vidět i několik odkazů.

Ve výchozím nastavení se spoléhá na

živel a dlouhého neuspořádaného seznamu. Zatím si nemyslím, že tento plugin podporuje víceúrovňové rozevírací seznamy, ale pokud znáte trochu jQuery, můžete to přidat sami.

OkayNav je velmi jednoduchý a je to pro jednodušší webové stránky které mají pouze několik navigačních odkazů. Tyto odkazy se pomalu skrývá za menu mimo obrazovku jakmile narazí na určitý výřez a více odkazů se schovává čím menší prohlížeč dostane.

Budeš to muset zabalit neuspořádaný seznam v navigačním prvku a dát mu konkrétní ID. Potom můžeš cílové celé nav s okayNav () fungovat takto:

 var navigation = $ ('# nav-main') okayNav ();

Všimněte si toto nejjednodušší nastavení bez vlastních funkcí. Můžete s nimi pracovat více než tucet vlastních možností vestavěn do této knihovny, aby ovládal styl ikon, animaci menu, podporu posouvání a funkce zpětného volání.

A můžete dokonce zavolat na menu otevřít / zavřít podle přání předáním specifických hodnot funkci. Zde je jednoduchý příklad otevřete navigaci:

 navigation.okayNav ('openInvisibleNav');

Všechny tyto kódy jsou dobře zdokumentovány v GitHub repo který také obsahuje stažení skriptu. Pokud dáváte přednost trase CDN, můžete použít také Odkaz RawGit přidat tento skript přímo z GitHubu.

OkayNav je skvělé pro menší lokality progresivní navigační techniku. Ale pokud si stále nejste jisti, jak to funguje, podívejte se na toto demo na CodePen, které ukazuje, co tento malý plugin dokáže.