클릭시 펼쳐지는 메뉴 정보
JavaScript 클릭시 펼쳐지는 메뉴
본문
<style type="text/css">
.cate_scroll-list {
position: absolute;
top: 50px;
left: 3px;
border: 1px solid #ccc;
background-color: #fff;
width: 175px;
height: 1px;
overflow: auto;
scrollbar-face-color: #DBDBDB;
scrollbar-track-color: #F4F4F4;
scrollbar-highlight-color: #DBDBDB;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-shadow-color: #DBDBDB;
scrollbar-darkshadow-color: #DBDBDB;
scrollbar-arrow-color: #606060;
}
</style>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<SCRIPT LANGUAGE="JavaScript">
<!--
function startCateScrollScroll() {
setTimeout("slideCateScroll()", 10);
}
function slideCateScroll() {
var Sel_Height=150; //셀렉트 박스의 세로 크기 지정
el = document.getElementById("cate_scroll-list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 1;
el.heightTo = Sel_Height;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 1; //셀렉트 영역이 닫힐때 크기 지정
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startCateScrollScroll();
} else {
if (el.heightTo == Sel_Height) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
//-->
</SCRIPT>
<div id="cate_scroll" style="background-image:url('http://tagin.net/img/logo.gif'); background-repeat:no-repeat; position:relative; left:0; top:0px;">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()">클릭하세요</span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:20; overflow: auto;">
<a href="http://www.tagin.net/">HOME</a><BR />
<a href="http://www.tagin.net/">태그인넷</a><BR />
<a href="http://www.tagin.net/">자바스크립트 소스</a><BR />
<a href="http://www.tagin.net/">태그소스</a><BR />
<a href="http://www.tagin.net/">나모강좌</a><BR />
<a href="http://www.tagin.net/">동영상편집</a><BR />
<a href="http://www.tagin.net/">캡쳐</a><BR />
<a href="http://www.tagin.net/">녹음 녹화강좌</a><BR />
<a href="http://www.tagin.net/">코덱다운로드</a><BR />
<a href="http://www.tagin.net/">네로버닝롬 강좌</a><BR />
</div>
</div><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
.cate_scroll-list {
position: absolute;
top: 50px;
left: 3px;
border: 1px solid #ccc;
background-color: #fff;
width: 175px;
height: 1px;
overflow: auto;
scrollbar-face-color: #DBDBDB;
scrollbar-track-color: #F4F4F4;
scrollbar-highlight-color: #DBDBDB;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-shadow-color: #DBDBDB;
scrollbar-darkshadow-color: #DBDBDB;
scrollbar-arrow-color: #606060;
}
</style>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<SCRIPT LANGUAGE="JavaScript">
<!--
function startCateScrollScroll() {
setTimeout("slideCateScroll()", 10);
}
function slideCateScroll() {
var Sel_Height=150; //셀렉트 박스의 세로 크기 지정
el = document.getElementById("cate_scroll-list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 1;
el.heightTo = Sel_Height;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 1; //셀렉트 영역이 닫힐때 크기 지정
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startCateScrollScroll();
} else {
if (el.heightTo == Sel_Height) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
//-->
</SCRIPT>
<div id="cate_scroll" style="background-image:url('http://tagin.net/img/logo.gif'); background-repeat:no-repeat; position:relative; left:0; top:0px;">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()">클릭하세요</span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:20; overflow: auto;">
<a href="http://www.tagin.net/">HOME</a><BR />
<a href="http://www.tagin.net/">태그인넷</a><BR />
<a href="http://www.tagin.net/">자바스크립트 소스</a><BR />
<a href="http://www.tagin.net/">태그소스</a><BR />
<a href="http://www.tagin.net/">나모강좌</a><BR />
<a href="http://www.tagin.net/">동영상편집</a><BR />
<a href="http://www.tagin.net/">캡쳐</a><BR />
<a href="http://www.tagin.net/">녹음 녹화강좌</a><BR />
<a href="http://www.tagin.net/">코덱다운로드</a><BR />
<a href="http://www.tagin.net/">네로버닝롬 강좌</a><BR />
</div>
</div><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
추천
0
0
댓글 0개