JavaScript - 2차카테고리 드롭다운 메뉴 구현

목표

.slideDown(), .slideUp() 함수를 이용하여 마우스 오버시 작동되는 드롭다운 메뉴 구현하기

---

HTML 마크업

<div class="detail">
    <ul>
        <li>컴퓨터
            <ol>
                <li>조립PC</li>
                <li>할인안내</li>
            </ol>
        </li>
        <li>마우스
            <ol>
                <li>2만원 이하</li>
                <li>5만원 이하</li>
            </ol>
        </li>
        <li>키보드
            <ol>
                <li>게이밍</li>
                <li>사무용</li>
            </ol>
        </li>
    </ul>
</div>

CSS

 

1. 먼저 1차 카테고리 역할을 할 li를 정렬 해 줍니다. 기능만 구현 할 것이기 때문에 최소한의 꾸밈 없이 진행합니다!

.detail > ul {display:flex; width:1000px; margin:0 auto;}
.detail > ul > li {width:33.3333%; border:1px solid #000; }

결과

2.이후 li의 내부에 위치한 ol을 숨겨줍니다.

.detail > ul > li > ol {display:none;}

결과

 

3. javascript를 작성합니다.

//최신 jquery
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function(){
    	//1차카테고리에 '마우스 오버'시 작동되기 때문에 .mouseover 이벤트 리스너를 사용합니다.
        $('.detail > ul > li').on('mouseover',function(){
        	
            $(this).find('> ol').slideDown()
    
            
        })
    })
</script>

this를 사용하는 이유:

해당 마우스가 올라간 영역의 메뉴만 드롭다운 해야하는것이 저의 목적이기 때문에 $(this) 를 사용해서 이벤트를 발생시킵니다.

 

나는 전체 메뉴를 한번에 드롭다운 되도록 하고싶다 하시는 분들은 $(this) 가 아닌 $('.detail > ul > li > ol')을 사용해 주세요.

 

slideDown은 말그대로 목록을 보여줄 때 드롭다운 애니메이션을 보여주는 함수입니다.

귀찮게 애니메이션을 설정하지 않아도 되도록 설정된 함수입니다.

자주 애용하고 있씁니다.

 

하지만 위의 방식대로 하고나니 모든 영역이 다같이 움직이는 현상이 발생합니다.

 

그래서 이때 CSS에서 ol을 포지션으로 띄워줍니다.

 

아래의 CSS를 입력합니다.

이때 li에 포지션 기준을(position:relative) 주면 각 li를 기준으로 top, left가 설정되어 잘 나오고,

ul에 포지션 기준을 주면 ol이 겹치게 될 것입니다. 그러니 주의해서 relative를 설정해줍니다!

.detail > ul {display:flex; width:1000px; margin:0 auto;}
.detail > ul > li {position:relative; width:33.3333%; border:1px solid #000; height:20px; line-height:20px; }
.detail > ul > li > ol {display:none; position:absolute; top:20px; left:0;}
.detail > ul > li > ol > li {}

그리고 마우스를 뗄 때에는 mouseleave 와 slideUp 함수를 이용하여 닫습니다.

응용으로 도전해보세요.

 

답안은 아래 더보기에 적어놓겠습니다.

$('.detail > ul > li').on('mouseleave',function(){
    $(this).find('> ol').slideUp()
})