Utwórz inteligentniejsze menu nawigacji responsywnej dzięki tej wtyczce jQuery
Każda nowoczesna strona potrzebuje responsywny układ i a użyteczna nawigacja. To jest dane.
Ale menu hamburgerów może iść tylko tak daleko, a oni radykalnie zmienić użyteczność dla różnych rozmiarów ekranu. Lepszym sposobem radzenia sobie z tym jest stopniowo ukrywa linki z wtyczką, taką jak OkayNav.
Ta darmowa wtyczka jQuery dodaje bardzo prostą funkcję menu do dowolnej strony i sskromnie ukrywa elementy nawigacyjne, na podstawie różnych rzutni. W ten sposób użytkownicy smartfonów mają menu z jednym hamburgerem, ale użytkownicy tabletów mogą także zobaczyć kilka linków.
Domyślnie polega na a element i a długa nieuporządkowana lista. Jak dotąd nie sądzę, że ta wtyczka obsługuje rozwijane listy wielopoziomowe, ale jeśli znasz trochę jQuery, możesz dodać to sam.
OkayNav jest niezwykle prosty i jest przeznaczone dla prostszych stron internetowych które mają tylko kilka linków nawigacyjnych. Te linki powoli schowaj się za menu poza ekranem po trafieniu w określony rzutni i więcej linków się ukrywa im mniejsza przeglądarka.
Musisz owiń swoją nieuporządkowaną listę w elemencie nawigacyjnym i nadaj mu określony identyfikator. Wtedy możesz wyceluj w cały nav z okayNav () działa tak:
var navigation = $ ('# nav-main'). okayNav (); Zauważ, że to tylko najprostsza konfiguracja bez żadnych niestandardowych funkcji. Możesz pracować z kilkanaście opcji niestandardowych wbudowane w tę bibliotekę, aby kontrolować styl ikon, animację menu, obsługę machnięcia i funkcje zwrotne.
I możesz nawet wywołać menu otwórz / zamknij do woli przekazując określone wartości do funkcji. Oto prosty przykład otwórz nawigację:
navigation.okayNav ('openInvisibleNav'); Wszystkie te kody są dobrze udokumentowane w Repo GitHub co obejmuje również pobranie skryptu. Jeśli wolisz trasę CDN, możesz również użyć Link RawGit aby dodać ten skrypt bezpośrednio z GitHub.
OkayNav jest idealne dla mniejszych witryn które korzystają z techniki nawigacji progresywnej. Ale jeśli nadal nie jesteś pewien, jak to działa, sprawdź to demo na CodePen pokazujące, co ta mała wtyczka może zrobić.
