Menu__top–example-documentation

menu__top jest odpowiedzialne za interakcje menu__offside i menu__search:

Przykłady elementu menu__top:

Menu top jest elementem posiadającym klasę .menu__top

Menu top jest odpowiedzialne za wyświetlanie menu__offside i menu__search czyli elementów posiadających odpowiednio klasy

const menuSearch      =     .menu__search;
const menuOffcanvas =     .menu__offside

Te elementy powinny być unikalne na stronie. Elementy mogą być aktywowane przy użyciu elementów posiadających klasy

const sidebarToggleBtn =.sidebar__toggle-btn
const searchBarToggleBtn  =.search-bar__toggle-btn

Tych elementów może być dowolnie dużo na stronie, taki element po kliknięciu spowoduje nadanie klasy active dla elementu posiadającego klasę na przykładzie:

Element sidebar <div class="menu__offside active"> Content</div>

Kliknięcie w element <div clas= "sidebar__toggle-btn">...</div>

Spowoduje zminanę elementu Sidebar na:

 <div class="menu__offside active"> Content</div>

Dodatkowe interakcje:

Do elementów menu__offside i menu__search z klasą active zostaje dopięta funkcja zmieniająca ich wysokość na 100% wysokości dostępnego ekranu – wysokość elementu menu__top , a następnie zostają przesunięte o wysokość elementu menu__top (w prostych słowach, są takie, żeby zająć 100% ekranu i nie powodować overflow)

Poniżej prosta implementacja

Poniżej najprostsza implementacja