아래와 같은 화면에서 모델을 누르면 하위 메뉴창이 나오게 하려면 어떻게 해야할까?
답은 다음과 같은 구조이다.
box_tab 에 position: relative를 주고 현대, 모델, 세부모델 div를 box_tab 자식으로 둔다.
각각 텍스트, 메뉴창을 자식으로 줘서 관리한다.
<div id="box_tab">
<div id="sub_tab">
<strong> 현대 </strong>
<div id="list"> 메뉴창 내용 </div>
</div>
...
와 같은 형식이다.
id="list"에 대해서는 position absolute를 줘서 box_tab을 기준으로 위치 시킨다. 이를 통해서 간단한 구조로 메뉴창 위치를 잡을 수 있다. 실제로 위 코드를 분석해보려면 엔카 사이트를 들어가보면 된다. 토글되는 방식은 자바스크립트를 이용해서 동적으로 바꿔주면 된다. 여러 방법이 있으니 javascript click toggle example로 검색해서 예제를 찾아보면 될 것이다.
