자스+css+html로 구성된? 정보
자스+css+html로 구성된?
본문
세로 고정이고 마우스 오버시 세로로 펼쳐지는 자스+css+html로 구성된
코드좀 공유 부탁드립니다. 바쁜데 딱히 생각은 안나오고 힘들어서 그래요.
포인트는 넉넉하게 걸어 놓겠습니다.
제이쿼리도 되고 상관은 없어요.
전에 가지고 있던 것이 자스+css+html식이라....
플리즈!!!!
코드좀 공유 부탁드립니다. 바쁜데 딱히 생각은 안나오고 힘들어서 그래요.
포인트는 넉넉하게 걸어 놓겠습니다.
제이쿼리도 되고 상관은 없어요.
전에 가지고 있던 것이 자스+css+html식이라....
플리즈!!!!
댓글 전체
<style type="text/css">
.sv3 dl,.sv3 dt,.sv3 dd{
padding:0;
margin:0;
}
.sv3{
width:240px;
border:1px solid #BFC7D9;
}
.sv3 dl{
width:240px;
height:380px;
background:#EDF5FF;
overflow:hidden;
}
.sv3 dt{
padding:5px 10px;
height:13px;
font-size:13px;
color:#000;
background:#E5ECF9;
border-top:1px solid #fff;
border-bottom:1px solid #BFC7D9;
}
.sv3 dl.on dt{
background:#3366CC;
color:#FFF;
font-weight:bold;
}
.sv3 dd{
padding:10px;
color:#333;
font-size:12px;
line-height:1.5em;
}
.sv3 dd a:link,
.sv3 dd a:visited,
.sv3 dd a:hover,
.sv3 dd a:active{
color:#333;
display:block;
text-align:right;
}
</style>
<h3>DIV+CSS View</h3>
<div id="idSlideView3" class="sv3">
<dl class="on">
<dt>Title-01</dt>
<dd>Content 01</dd>
</dl>
<dl>
<dt>Title-02</dt>
<dd>Content 02</dd>
</dl>
<dl>
<dt>Title-03</dt>
<dd>Content 03</dd>
</dl>
<dl>
<dt>Title-04</dt>
<dd>Content 04</dd>
</dl>
<dl>
<dt>Title-05</dt>
<dd>Content 05</dd>
</dl>
</div>
<script language="javascript">
function SlideView(e){
for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){
j.style.height=(i?24:379)+'px';
j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,379,24)(p=i,24,379)},200)};
}
function _(el,f,t){
c(el.$1);el.className=f>t?'':'on';
return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t?'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_
}
};
new SlideView( "idSlideView3");
</script>
어느분 소스 참고했어요오~
.sv3 dl,.sv3 dt,.sv3 dd{
padding:0;
margin:0;
}
.sv3{
width:240px;
border:1px solid #BFC7D9;
}
.sv3 dl{
width:240px;
height:380px;
background:#EDF5FF;
overflow:hidden;
}
.sv3 dt{
padding:5px 10px;
height:13px;
font-size:13px;
color:#000;
background:#E5ECF9;
border-top:1px solid #fff;
border-bottom:1px solid #BFC7D9;
}
.sv3 dl.on dt{
background:#3366CC;
color:#FFF;
font-weight:bold;
}
.sv3 dd{
padding:10px;
color:#333;
font-size:12px;
line-height:1.5em;
}
.sv3 dd a:link,
.sv3 dd a:visited,
.sv3 dd a:hover,
.sv3 dd a:active{
color:#333;
display:block;
text-align:right;
}
</style>
<h3>DIV+CSS View</h3>
<div id="idSlideView3" class="sv3">
<dl class="on">
<dt>Title-01</dt>
<dd>Content 01</dd>
</dl>
<dl>
<dt>Title-02</dt>
<dd>Content 02</dd>
</dl>
<dl>
<dt>Title-03</dt>
<dd>Content 03</dd>
</dl>
<dl>
<dt>Title-04</dt>
<dd>Content 04</dd>
</dl>
<dl>
<dt>Title-05</dt>
<dd>Content 05</dd>
</dl>
</div>
<script language="javascript">
function SlideView(e){
for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){
j.style.height=(i?24:379)+'px';
j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,379,24)(p=i,24,379)},200)};
}
function _(el,f,t){
c(el.$1);el.className=f>t?'':'on';
return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t?'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_
}
};
new SlideView( "idSlideView3");
</script>
어느분 소스 참고했어요오~
헉...감사합니다!
에공...드리는 것 없이 일현님 포인트로 낼름 좋은 소스를 얻어가게되네요...
^^; 죄송합니다.
^^; 죄송합니다.
이런걸 아코디언 메뉴라고 하나요?
저도 일현님 포인트로 좋은소스가져가네요~
저도 일현님 포인트로 좋은소스가져가네요~
정말 thank you very very...
잘 쓰겠습니다. 덤으로 얻어 가네요. 매뉴좀 어떻게 해볼려고 했는데 아주 좋네요
별명도 인후지덕이네요 ^^
잘 쓰겠습니다. 덤으로 얻어 가네요. 매뉴좀 어떻게 해볼려고 했는데 아주 좋네요
별명도 인후지덕이네요 ^^
쩝...열심히 돌아다니다보면 떡도 생기네여........
근데 이멋있는걸 어디에 쓸까???
근데 이멋있는걸 어디에 쓸까???
rtrt
