본문 바로가기
프로그래밍/자바스크립트

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

by pentode 2018. 10. 31.
반응형

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


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



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 을 사용하지 못하고 다른 방법을 찾아야 겠습니다.

반응형

댓글1