큰메뉴를 클릭하면 아래의 서브메뉴가 부드럽게 나타납니다 다시 클릭하면 부드럽게 사라집니다.
 사용방법
메뉴가 삽입되는 HTML파일의 <Head> </Head> 사이에 아래의 스크립트를 꼭 삽입합니다.
<link rel="stylesheet" type="text/css" href="slashfiles/menu.css" />
<script type="text/javascript" src="slashfiles/menu.js"></script>
menu.css파일과 menu.js파일이 꼭 연결되어있어야하며 다른 css파일을 사용하고있으시다면 menu.css파일의 내용을 사용하시는 css파일에 삽입하여주세요. 또한 이 두개의 파일의 경로만 맞으면 디렉토리는 다른걸 사용하여도 상관없습니다.
<p align="left"><a href="javascript:slash_expandall()">전부 펼치기</a>/
<a href="javascript:slash_contractall()">모두 닫기</a></p>
<div class="sdmenu">
<span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />큰메뉴1</span>
<div class="submenu">
<a href="http://www.happycgi.com">메뉴1-1</a>
<a href="http://www.happycgi.com">메뉴1-2</a>
<a href="http://www.happycgi.com">메뉴1-3</a>
<a href="http://www.happycgi.com">메뉴1-4</a>
<a href="http://www.happycgi.com">메뉴1-5</a>
<a href="http://www.happycgi.com">메뉴1-6</a>
</div>
<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />큰메뉴2</span>
<div class="submenu">
<a href="http://www.happycgi.com">메뉴2-1</a>
<a href="http://www.happycgi.com">메뉴2-2</a>
<a href="http://www.happycgi.com">메뉴2-3</a>
</div>
<span class="title"><img src="slashfiles/expanded.gif" class="arrow" alt="-" />큰메뉴3</span>
<div class="submenu">
<a href="http://www.happycgi.com">메뉴3-1</a>
<a href="http://www.happycgi.com">메뉴3-2</a>
<a href="http://www.happycgi.com">메뉴3-3</a>
<a href="http://www.happycgi.com">메뉴3-4</a>
</div>
</div>
파란색으로 된부분은 메뉴의 큰메뉴부분입니다 이부분을 하나더 삽입하면 또 하나의 큰메뉴가 생성되는것입니다.
붉은색으로 된부분의 <div class="submenu"> 는 이 사이에 있는내용을 서브메뉴로 만들어주는것입니다.
그러므로 큰메뉴를 출력하는곳 아래에 이부분을 삽입하여 아래에 내용을 입력하면 큰메뉴 클릭시 출력되는 내용이
그 아래에 있는 <div class="submenu"> 안에 있는 내용이 출력됩니다.
|
