2223_outerHeight_setTimeout

$(function(){

    $header  = $('header'),

    $firstli = $('nav > ul > li'),

    $headerHeight = $header.outerHeight();

       

   

    $firstli.mouseenter(function(){

        var currentMenu = $(this);

        var $subHeight = currentMenu.find('ul').outerHeight();

        $header.stop().animate({height:$headerHeight + $subHeight + 'px'},300);

        //setTimeout(할일, 시간); 할일 function(){} 에 대입해보자

        setTimeout(function(){currentMenu.find('ul').show();},300);

   

    })

    .mouseleave(function(){

        $header.stop().animate({height:$headerHeight + 'px'},300);

        $(this).find('ul').hide();

    });

   

});

 

****css에서

nav > ul > li:hover ul {
display:block; position:absoulte;
} 주었떠니 ul이 나온다음 높이가 늘어난다. 이게 아님
높이가 늘어난 다음에 ul이 나오게하려면.
css에서 줬떤 hover을 지운다.

 

js에서 
$(this).find('ul').show();추가한다.

$(this).find('ul').hide():

늘어나고 ul이 나왔으면 좋겠다. setTimeout을 쓰자.

 

시간을 재서 그시간이 지나서 오게하자.

일정시간이 지나면 할일

 

*요소의 높이 알기

A.height(): 알맹이 높이

A.innerHeight() : 알맹이 paddign까지의 높이

A.outerHeight() : 알맹이의 border까지의 높이

A.outerHeight(true) : 이 요소가 가지는 마진까지.