$(function(){

    var d = 0;

    function afterclick(){
        $(".ln").eq(0).css({
            top : "50%",
            transform : "translate(-50%,-50%) rotate(45deg)"
        });
        $(".ln").eq(1).css({
            opacity : "0"
        });
        $(".ln").eq(2).css({
        bottom : "50%",
        transform : "translate(-50%,50%) rotate(-45deg)"
        });
        
        $(".nav").show();

        d=1;
    }

    function beforeclick(){
        $(".ln").eq(0).css({
            top : "20%",
            transform : "translate(-50%,-20%) rotate(0deg)"
        });
        $(".ln").eq(1).css({
            opacity : "1"
        });
        $(".ln").eq(2).css({
        bottom : "20%",
        transform : "translate(-50%,20%) rotate(-0deg)"
        });

        $(".nav").hide();

        d=0;
    }

    $(".menuicon").click(function(){
       
        if(d == 0){
            afterclick();
        }
        else{
            beforeclick();
        }
    });


   

});