html로 작업한거같은데 초보가 질문좀 드립니다 ㅠ 정보
html로 작업한거같은데 초보가 질문좀 드립니다 ㅠ
본문
http://weddingcool.co.kr/fair1304/index.html#menu1
여기 보시면 메뉴누르면 이미지가 오르락 내리락하는데 html 태그를 사용한건가요??
이런 홈페이지 작업하려고하는데.. 팁좀 부탁드리겠습니다!
여기 보시면 메뉴누르면 이미지가 오르락 내리락하는데 html 태그를 사용한건가요??
이런 홈페이지 작업하려고하는데.. 팁좀 부탁드리겠습니다!
댓글 전체
스크립트요~ ㅎㅎ
css에 position, z-index 속성을 알아보시면 쉽게 하실수 있습니다.
jquery 공부하세요
스크롤 반응 빼고 기본 메뉴만 한번 흉내 내봤습니다.
나머지 연구는 ... 화이팅입니다. ㅡ.ㅡㅋ
<!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>
감사합니다~
주석이 없어서 아쉽네요,.