1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function initNav() {

    //set up variables

    var windowWidth = $(window).width();

    var windowHeight = $(window).height();

    var logo = 328;

    var cap = 54;

    var pancake = windowWidth - logo - 3;

    

    //set up function

    $(function() {

        $("#main-nav .logo").stop(true, true).animate({"width": logo}, 250, 'swing');

        $("#main-nav .grup").stop(true, true).delay(100).animate({"width": pancake}, 300, 'swing');

        $('#main-nav .cap').stop(true, true).delay(1000).animate({backgroundColor: '#d81f27',color: 'white'}, 'fast').html('–');

    }, function() {

        $("#main-nav .grup").stop(true, true).delay(2000).animate({width: 54}, 300, 'swing');

        $("#main-nav .logo").stop(true, true).delay(2300).animate({"width": logo}, 300, 'swing');

        $('#main-nav .cap').stop(true, true).delay(500).animate({backgroundColor: '#C0C0C0',color: 'red'}, 'fast').html('+');

    });

}



//call function on user event

$("#main-nav .cap").click(initNav); //call the function on click of element

$("#main-nav .logo").hover(initNav); //call the function on hover of element​​​​