jQuery UI Accordian을 사용한 메뉴 만들기

jQuery UI 의 Accordian 기능을 이용해서 메뉴를 만들어 봅니다. jQuery UI는 http://jqueryui.com/ 에서 다운로드 받을 수 있습니다.

1. 필요한 자바스크립트와 스타일 시트를 포함합니다.

<link rel="stylesheet" type="text/css" href="../js/jquery-ui-1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.12.1/jquery-ui.min.js"></script>

2. 메뉴가 될 HTML 입니다.

<div id="menu">
    <h3><a>Menu 1</a></h3>
    <div>
        <div><a>Sub menu 1-1</a></div>
        <div><a>Sub menu 1-2</a></div>
    </div>
    <h3><a>Menu 2</a></h3>
    <div>
        <div><a>Sub menu 2-1</a></div>
        <div><a>Sub menu 2-2</a></div>
    </div>
    <h3><a>Menu 3</a></h3>
    <div>
        <div><a>Sub menu 3-1</a></div>
        <div><a>Sub menu 3-2</a></div>
    </div>
</div>

3. 메뉴를 생성합니다.

<script type="text/javascript">
//<![CDATA[
$(function(){
    $("#menu").accordion({
        header: "> h3",
        collapsible: false,
        active: 1
    });
});
//]]>
</script>

- header: 기본값을 <h3> 태그 입니다. 그 외의 태그를 사용하려면 header 옵션을 지정합니다. jQuery의 셀렉터 구문을 사용할 수 있습니다.

- collapsible: true를 설정하면 모든 메뉴를 다 닫을 수 있습니다. false로 지정하면 하나의 메뉴는 항상 열려 있게 됩니다.

- active: 페이지로드시에 열려 있을 메뉴를 지정합니다. 인덱스는 0부터 시작하고, 기본값이 0입니다.

jQuery UI의 Acccordian을 사용해서 메뉴를 만들때 한계가 모든 메뉴를 다 열거나 여러개의 메뉴를 열수가 없다는 것입니다. 한번에 한개의 메뉴만 열리게 됩니다.

여러개의 메뉴가 열리게 하기 위해서는 jQuery UI의 Accordian 을 사용하지 못하고 다른 방법을 찾아야 겠습니다.