Skip to main content

jQuery – Animowane menu podręczne

Bardzo popularnym rodzajem menu w aplikacjach mobilnych, jest animowane menu podręczne, które jest cały dostępne dla użytkownika. Jeśli w aplikacjach to się sprawdza, to dlaczego nie wykorzystać by tego w mobilnych wersjach naszych stron?

Przygotowanie plików

Aby nasze menu wyglądało dobrze, musimy mieć przygotowane bardzo dobre grafiki. Do naszego kursu proponuję wykorzystać te przygotowane przeze mnie.

 

Najlepiej będzie, jeśli ikony będą w tym samym kształcie (koło jest idealne), oraz posiadały wypełniony środek. Istnieje możliwość dodania wypełnienia przy pomocy css, natomiast nie jest on głównym przedmiotem zainteresowania w tym kursie.

HTML


<img class="ikonka opt1" src="img/opt1.png">
<img class="ikonka opt2" src="img/opt2.png">
<img class="ikonka opt3" src="img/opt3.png">
<img class="ikonka add" src="img/add.png">

CSS


.ikonka {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    left: 30px;
}

jQuery

Wreszcie przyszedł czas na część właściwą. Aby łatwiej zrozumieć zasadę działania skryptu, podzielmy go na kilka mniejszych kroczków. Pamiętaj o tym, by cały kod wpisać w <script></script> oraz w metodzie .ready()

Obracanie głównego przycisku

Po kliknięciu w przycisk „+” chciałbym, aby on obrócił się kilka razy i zatrzymał w pozycji wyświetlającej „x”. Aby to zrobić należy „oprogramować” ten przycisk w następujący sposób.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
    });
});

Po tym kroku, nasz przycisk powinien obrócić się o 405 stopni i zatrzymać w pozycji „x”

Wyskakujące przyciski

Gdy klikniemy w przycisk „+” powinny nam wyskoczyć 3 pozostałe przyciski. Każdy w innym kierunku.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'bottom': '+=70px'}, 500);
        $('.opt2').animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
        $('.opt3').animate({'left': '+=70px'}, 500);

    });
});

Wszystkie przyciski pojawiają się w tym samym czasie, należy to delikatnie opóźnić. Wprowadźmy drobne poprawki do kodu.


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'bottom': '+=70px'}, 500);
        $('.opt2').delay(200).animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
        $('.opt3').delay(400)animate({'left': '+=70px'}, 500);

    });
});

Chowanie przycisków

To już ostatni element całej układanki. Menu należy ukryć po kliknięciu w przycisk, najlepiej w sposób odwrotny do pojawiania się


$(document).ready(function(){
    $('.add').click(function() {
        $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
        $('.opt1').animate({'left': '-=70px'}, 500);
        $('.opt2').delay(200).animate({'bottom': '-=50px', 'left': '-=50px'}, 500);
        $('.opt1').delay(400)animate({'bottom': '-=70px'}, 500);

    });
});

Aby całość była dopełniona, musimy dodać instrukcję warunkową, która będzie wykrywała jaki jest stan przycisków.

$(document).ready(function(){
    var show;
    $('.add').click(function() {
        if (show != true){
            show = true;
            $(this).css({'transform': 'rotate(-405deg)', 'transition': 'transform 1s'});
            $('.opt1').animate({'bottom': '+=70px'}, 500);
            $('.opt2').delay(200).animate({'bottom': '+=50px', 'left': '+=50px'}, 500);
            $('.opt3').delay(400).animate({'left': '+=70px'}, 500);
        }
        else {
            show = false;
            $(this).css({'transform': 'none', 'transition': 'transform 1s'});
            $('.opt3').animate({'left': '-=70px'}, 500);
            $('.opt2').delay(200).animate({'bottom': '-=50px', 'left': '-=50px'}, 500);
            $('.opt1').delay(400).animate({'bottom': '-=70px'}, 500);
        }
    });
});