Wysuwany boczny panel menu

W tym poście pokażę jak zrobić na stronie wysuwany, boczny panel menu. Takie rozwiązanie bardzo dobrze sprawdza się na widokach mobilnych. Zapewne każdy z nas natknął się na coś takiego podczas wędrówki po kniejach sieci, choćby na tym blogu 🙂

Aby wykonać zadanie potrzebna będzie biblioteka jQuery.

W kodzie html (poniżej) osadzimy dwa przyciski: #button-show-panel i #button-hide-panel, których kliknięcie spowoduje odpowiednio wysunięcie lub schowanie się menu.

Kod css:

Domyślnie przycisk #button-hide-panel będzie niewidoczny, a pojawi się dopiero wtedy, gdy panel się wysunie. Odwrotnie zachowa się przycisk #button-show-panel. Wszystko za sprawą skryptu jQuery 🙂

Funkcja animate pozwala animować elementy htmla. Jak widać, panel wysuwa się od prawej krawędzi okna przeglądarki: animate({„right”:”+=300px”}. Oczywiście możemy zmienić orientację ;). Wystarczy wszędzie parametr „right” zamienić na „left” i pozamiatane. Wartość „200” to prędkość animacji podana w milisekundach.

Na koniec gotowe rozwiązanie:

Pozdrawiam i do następnego =>

wydrukuj temat