http://weddingcool.co.kr/fair1304/index.html#menu1
여기 보시면 메뉴누르면 이미지가 오르락 내리락하는데 html 태그를 사용한건가요??
이런 홈페이지 작업하려고하는데.. 팁좀 부탁드리겠습니다!
여기 보시면 메뉴누르면 이미지가 오르락 내리락하는데 html 태그를 사용한건가요??
이런 홈페이지 작업하려고하는데.. 팁좀 부탁드리겠습니다!
댓글 6개
스크롤 반응 빼고 기본 메뉴만 한번 흉내 내봤습니다.
나머지 연구는 ... 화이팅입니다. ㅡ.ㅡㅋ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#wrapper {
width: 100%;
height: 100%
position: absolute;
overflow: hidden;
left: 0;
top: 0;
}
#navi {
z-index: 999;
background-color: red;
position: absolute;
right: 0px;
}
#article {
overflow: hidden;
height: 300px;
}
.cont1 {
background-color: red;
width: 300px;
height: 300px;
position: absolute;
z-index: 5;
}
.cont2 {
background-color: yellow;
width: 300px;
height: 300px;
position: absolute;
z-index: 4;
}
.cont3 {
background-color: blue;
width: 300px;
height: 300px;
position: absolute;
z-index: 3;
}
.cont4 {
background-color: black;
width: 300px;
height: 300px;
position: absolute;
z-index: 2;
}
.cont5 {
background-color: purple;
width: 300px;
height: 300px;
position: absolute;
z-index: 1;
}
</style>
<script>
var zindex = 1000;
var now_idx = 0;
$(document).ready(function(){
$("#navi ul li").click(function(){
var idx = $(this).index();
if ( now_idx < idx )
{
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('top', 300 );
$("#article div").eq(idx).animate({'top':'8px'}, function(){
now_idx = idx;
});
} else if ( now_idx > idx)
{
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('top', -300 );
$("#article div").eq(idx).animate({'top':'8px'}, function(){
now_idx = idx;
});
}
});
});
</script>
</HEAD>
<BODY>
<div id="wrapper">
<div id="navi">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="article">
<div class="cont1 panel"></div>
<div class="cont2 panel"></div>
<div class="cont3 panel"></div>
<div class="cont4 panel"></div>
<div class="cont5 panel"></div>
</div>
</div>
</BODY>
</HTML>
나머지 연구는 ... 화이팅입니다. ㅡ.ㅡㅋ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#wrapper {
width: 100%;
height: 100%
position: absolute;
overflow: hidden;
left: 0;
top: 0;
}
#navi {
z-index: 999;
background-color: red;
position: absolute;
right: 0px;
}
#article {
overflow: hidden;
height: 300px;
}
.cont1 {
background-color: red;
width: 300px;
height: 300px;
position: absolute;
z-index: 5;
}
.cont2 {
background-color: yellow;
width: 300px;
height: 300px;
position: absolute;
z-index: 4;
}
.cont3 {
background-color: blue;
width: 300px;
height: 300px;
position: absolute;
z-index: 3;
}
.cont4 {
background-color: black;
width: 300px;
height: 300px;
position: absolute;
z-index: 2;
}
.cont5 {
background-color: purple;
width: 300px;
height: 300px;
position: absolute;
z-index: 1;
}
</style>
<script>
var zindex = 1000;
var now_idx = 0;
$(document).ready(function(){
$("#navi ul li").click(function(){
var idx = $(this).index();
if ( now_idx < idx )
{
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('top', 300 );
$("#article div").eq(idx).animate({'top':'8px'}, function(){
now_idx = idx;
});
} else if ( now_idx > idx)
{
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('z-index', parseInt(++zindex));
$("#article div").eq(idx).css('top', -300 );
$("#article div").eq(idx).animate({'top':'8px'}, function(){
now_idx = idx;
});
}
});
});
</script>
</HEAD>
<BODY>
<div id="wrapper">
<div id="navi">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="article">
<div class="cont1 panel"></div>
<div class="cont2 panel"></div>
<div class="cont3 panel"></div>
<div class="cont4 panel"></div>
<div class="cont5 panel"></div>
</div>
</div>
</BODY>
</HTML>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1717629 | |
| 1717626 | |
| 1717625 | |
| 1717621 | |
| 1717619 | |
| 1717611 | |
| 1717610 | |
| 1717609 | |
| 1717607 | |
| 1717601 | |
| 1717598 | |
| 1717591 | |
| 1717590 | |
| 1717583 | |
| 1717575 | |
| 1717572 | |
| 1717568 | |
| 1717566 | |
| 1717549 | |
| 1717545 | |
| 1717533 | |
| 1717512 | |
| 1717511 | |
| 1717508 | |
| 1717495 | |
| 1717479 | |
| 1717473 | |
| 1717470 | |
| 1717463 | |
| 1717452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기