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

프로그래밍/자바스크립트 2018. 10. 31. 00:07
반응형

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

반응형

댓글을 달아 주세요

  • Deborah 2018.10.31 21:50 신고  댓글주소  수정/삭제  댓글쓰기

    아직도 생소한 부분이지만 차츰 보다 보면 적응이 될꺼라 생각되네요. 이쪽 분야는 문외안이라서요.
    멋진 정성을 다한 포스팅 봅니다. 편안한 밤되세요.