팝업 목록.

• 클릭하면 위로 팝업 목록이 나열되었다가, 다시 클릭하면 아래로 떨어진 리스트를 만듦.

• HTML

                <div class="family-site">
                    <button type="button">사이트
                        <img src="/image/arrow02.jpg" alt="열기">
                    </button>
                    <!--clear:both-->
                    <ul class="moving">
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                    </ul>
                </div>

• CSS

.family-site {
    position: relative;
    margin-top: 30px;
    top: 0;
    width: 100%;
    height: 40px;
    line-height: 30px;

}

.family-site button {
    z-index: 50;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    text-indent: 10px;
    border: 1px solid #222;
    background-color: #fff;
}

.family-site button img {
    float: right;
    margin: 5px;
    width: 15px;
}

.family-site button img.rotate{
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.family-site .moving {  
    overflow: hidden;   //안보이는 영역을 가려두고 영역을 js로 보이는 영역을 키울 것임//
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    border-top: 1px solid #222;
}

.family-site .moving li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
}

.family-site .moving li.pop { //up 과down시에 배경색이 있고 없어서 달아줌, 같으면 굳이 클래스 필요 없음//
    border-left: 1px solid #222;
    border-right: 1px solid #222;
    background-color: #fff;
}

.family-site .moving li:hover {
    background-color: #eee;
}

• js

	let pop = $('.family-site .moving');
	let btn = $('.family-site button');
	let li = $('.family-site .moving li');
	let liH = 40;
	let length = li.length+1;
	let showli = 8;//보이는 것 +1인 이유는 i=0 이기 떄문;
	let current = 0;
		
	btn.click(function(){
		
		if(current ==0){
			$('.family-site button img').removeClass('rotate');
			for(let i=0; i < showli; i++){//보여질 갯수가 될때까지 1씩 증가하며 높이값 키움//
				pop.animate({top:(liH*i)*-1, height:liH*i},10)
				.find('li').eq(i).addClass('pop');
				current++;
			}
		}
		else if(current >= showli && current < length){
			current=length;
			pop.find('li').removeClass('pop');
			$('.family-site button img').addClass('rotate');
			for(let i=0; i < length; i++){
				pop.animate({top:'100%',height:liH*i},10);
				current--;
				if(current==length) current=0;
			}
		}
	});