푸터등의 패밀리사이트 표기시, 셀렉박스 리스트 만드는방법

일반 기업 사이트 등에서 패밀리 사이트/연관 사이트 select해서 보여줄때 아래와 같이 처리한다. (일반 select태그를 써서 했더니 구글 크롬등에서는 팝업으로 인식해서 차단하더라;;;)

div로 영역잡고 li로 리스트 만들어서 마우스 클릭시 토글로 보이게/안보이게 처리한다.

예시 코드 (데모보기)

1. HTML선언

<div class="">
      <div class="">
            <div onclick="toggleItem();" style="cursor: pointer;" class="family_btn_wrap">
                <div class="family_btn">
                    계열사 바로가기
                </div>
            </div>
            <div class="family_list_wrap" id="families" style="display:none">
                <ul style="border:0; border-bottom:1px solid #808080; border-right:1px solid #808080; border-left:1px solid #808080;">
                    <li>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="http://www.google.com">사이트1(새창이동)</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="" href="http://www.cafe24.com">사이트2(같은창이동)</a></div>

                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트3</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트4</a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

2. javascript 함수 추가 (toggleItem)

function toggleItem() {
    if (document.getElementById("families").style.display == "" ) { document.getElementById("families").style.display="none";
   } else {
document.getElementById("families").style.display="";
   }
}