[JQuery] 상단메뉴 슬라이드(펼치기) 초간단

$('펼쳐질 메뉴').slideDown(속도);

1. slideDown() : 인자로 받은 시간동안 높이를 0부터 원래 높이까지 아래로 늘립니다.

$('#subMenu').slideDown(200);

2. slideUp() : 인자로 받은 시간동안 높이가 원래 높이에서 0까지 위로 줄어듭니다.

$('#subMenu').slideUp(200);

3. slideToggle() : 인자로 받은 시간동안 높이를 펼쳐져 있으면 접고 접혀있으면 펼칩니다.

$('#subMenu').slideToggle(200);

사용 예시

1. 메뉴를 만듭니다.

<div class="logo">
    <span class="logo">Logo</span>
</div>
<div class="topMenu">
    <ul class="dept01">
        <li>
            <span>MENU1</span>
            <ul class="dept02">
                <li id="asd">
                    하위메뉴1
                </li>
                    .
                    .
            </ul>
        </li>
        <li>
            <span>MENU2</span>
            <ul class="dept02">
                <li>
                    하위메뉴1
                </li>
                    .
                    .
            </ul>        
        </li>
            .
            .
    </ul>
</div>

2. 숨겨지고 펼쳐지고 할 부분을 숨깁니다.(display:none;)

.dept02 {display:none;}

3. mouseover 이벤트를 이용해 메뉴를 펼치고 접습니다.

$(document).on('mouseover', '.topMenu span', function () {
    $('.dept02').slideDown(200);
});
$(document).on('mouseover', 'div', function () {
    if (!$(this).hasClass('topMenu')) {
        $('.dept02').slideUp(200);
    }
});