큰메뉴를 클릭하면 아래의 서브메뉴가 부드럽게 나타납니다 다시 클릭하면 부드럽게 사라집니다.
큰메뉴1
큰메뉴2
큰메뉴3
메뉴가 삽입되는 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"> 안에 있는 내용이 출력됩니다.
소스
<html>
<head>
<title>부드러운 메뉴</title>
<link rel="stylesheet" type="text/css" href="slashfiles/menu.css" />
<script type="text/javascript" src="slashfiles/menu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
menu.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>
</body>
</html>
'WEB > HTML/Css/Script' 카테고리의 다른 글
| 이미지/자바스크립트를 이용한 메뉴 구현 (0) | 2007/06/29 |
|---|---|
| 드래그와 마우스 오른쪽버튼 사용못하게 (0) | 2007/06/29 |
| 부드러운 서브 메뉴(관리화면 구성에 좋을듯) (0) | 2007/06/29 |
| 깔끔한 자바스크립트 탭메뉴 (3) | 2007/06/29 |
| 다양한 효과의 풍선 도움말 (0) | 2007/06/25 |
| 링크에 강조 효과 주는 사각라인 출력 (0) | 2007/06/25 |
WEB/HTML/Css/Script
최근에 달린 댓글
링크
최근에 받은 트랙백
태그목록