close
download

W tym wpisie pokażę Ci jak w prosty sposób wykonać wysuwające się z boku menu. Zaczynajmy 🙂

Skorzystamy z bardzo lekkiej wtyczki Sliiide. Oferuje ona różne możliwości położenia menu, my w tym poradniku skorzystamy tylko z jednego z nich.

Na początku pobierzmy wtyczkę wchodząc na tą stronę i klikając Download ZIP. Z pobranego archiwum wyciągamy plik sliiide.min.js i wrzucamy do jakiegoś folderu. W tym samym folderze tworzymy plik index.html z poniższą zawartością:

Utworzyliśmy podstawową strukturę HTML. Wewnątrz sekcji head podłączamy Font Awesome. Jest to czcionka, która zawiera różne ikony. Pomiędzy znacznikami <style> wrzucimy później nasz kod CSS. Przed zamykającym znacznikiem </body> podpinamy bibliotekę jQuery oraz pobrany skrypt (umieszczony w tym samym folderze).

Zaraz za znacznikiem <body> dodajmy strukturę naszego menu:

Wewnątrz diva o id nav-icon znajduje się ikona z czcionki Font Awesome. Menu będzie się pojawiało/ukrywało przy klikaniu na tą ikonę. Poniżej znajduje się div o klasie left-menu. Przechowuje on listę nieuporządkowaną ul. Wewnątrz znajdują się elementy menu.

Przejdźmy teraz do znaczników <style> i dodajmy pomiędzy nimi poniższą zawartość:

Warto zwrócić uwagę na reguły dotyczące klasy .left-menu. Position ustawiony na fixed pozwala nam na przewijanie strony bez zmiany pozycji menu. Height  równy 100vh rozciąga menu zawsze na wysokość ekranu.

Możemy teraz zająć się aktywacją wtyczki. Pomiędzy znacznikami <script> wrzućmy kod:

Na kontenerze, który przechowuje menu wywołujemy funkcję sliiide() z parametrami:

  • place – położenie naszego menu (dostępne położenia menu możesz znaleźć tutaj)
  • toggle – element pokazujący/ukrywający menu

Pełną listę parametrów możesz zobaczyć tutaj.

I to wszystko 🙂

Przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.

Pozdrawiam 🙂

 

Tags : menumenu bocznesliiidewtyczka jQuery
  • Radek Wawrzyk

    Mam pytanie jak zrobić żeby menu wysuwało się od załóżmy lewej strony, ale pod jakimś elementem?

  • Piotr

    Proste do zrobienia a ciekawy efekt. Dzięki