[JS] Jak zbudować menu dopasowujące się do szerokości strony z wykorzystaniem AdaptiveNav.js?

Tworząc nowoczesne strony internetowe bardzo często można się spotkać z problemem działania nawigacji w różnych trybach działania strony. Czy menu ma się chować? Czy może ma zmieniać swój kształt i wygląd? Jest wiele różnych podejść.

Ten artykuł jest pierwszym z serii artykułów w których będę opisywał sposoby wykorzystania pluginów Javascript stworzonych w wolnych chwilach przeze mnie.

AdaptiveNav.js - co to jest?

AdaptiveNav.js jest to plugin Javascript, który pozwala na dostosowanie liczby widocznych elementów menu w zależności od szerokości ekranu. Jeśli elementy nie mieszczą się na ekranie, to wtedy zostają przeniesione do listy rozwijanej która jest otwierana za pomocą dodatkowego przycisku w nawigacji.

Sposób działania pluginu można zobaczyć na animacji poniżej:

Jak wykorzystać plugin na swojej stronie?

Aby móc wykorzystać możliwości pluginu na swojej stronie, należy pobrać plugin z repozytorium na Github.com lub uruchomić w linii komend następującą komendę:

npm install adaptive-nav

Następnie, należy dołączyć pliki adaptive-nav.min.js oraz adaptive-nav.css na swojej stronie.

Kolejnym krokiem jest przygotowanie struktury nawigacji w kodzie HTML. Przykładowa struktura może wyglądać następująco:

1
2
3
4
5
6
7
8
9

<nav class="adaptive-nav">
    <ul class="adaptive-nav__list">
        <li class="adaptive-nav__list__item">Item 1</li>
        <li class="adaptive-nav__list__item">Item 2</li>
        [...]
        <li class="adaptive-nav__list__item">Item 14</li>
        <li class="adaptive-nav__list__item">Item 15</li>
    </ul>
</nav>

Jeśli korzystamy z tej struktury, to możemy uruchomić plugin w następujący sposób:

1

new AdaptiveNav();

Zaawansowane wykorzystanie pluginu AdaptiveNav.js

W przypadku gdy dysponujemy inną strukturą HTML lub innymi klasami CSS dodanymi do elementów nawigacji, to możemy nieco zmodyfikować działanie pluginu poprzez dodanie obiektu z konfiguracją podczas inicjalizacji pluginu.

1
2
3
4
5
6
7
8

var adaptiveNav = new AdaptiveNav({
    // selektor CSS kontenera zawierającego menu z elementami nawigacji
    navSelector: '.nav-container',
    // selektor CSS listy z elementami nawigacji
    navListSelector: '.nav-list',
    // selektor CSS elementów nawigacji pierwszego poziomu (elementy z dodatkowych menu rozwijanych nie powinny używać tego selektora)
    navItemSelector: '.nav-item'
});

W przykładzie powyżej przedstawiono wszystkie opcje konfiguracyjne pluginu. Wszystkie z nich dotyczą selektorów CSS na podstawie których plugin będzie mógł odpowiednio zmodyfikować swoje działanie.

Ponadto, AdaptiveNav.js udostępnia metodę do aktualizowania stanu nawigacji (widoczności elementów nawigacji) na żądanie. Wystarczy tak jak w przykładzie powyżej utworzyć zmienną o nazwie adaptiveNav a następnie wywołać metodę aktualizującą stan nawigacji:

1

adaptiveNav.update();

Podsumowanie

Mam nadzieję, że plugin utworzony przeze mnie okaże się przydatny w Twojej codziennej pracy. Po zminifikowaniu plik z kodem waży niecałe 3kB. Wszelkie uwagi co do działania pluginu można zgłaszać w komentarzach do tego wpisu lub bezpośrednio na Github.com.

Zapraszam do pobierania pluginu stąd - AdaptiveNav.js | Github.com