SIR
도

html로 작업한거같은데 초보가 질문좀 드립니다 ㅠ

도룡이
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 12년 전 · 1219 · 6
http://weddingcool.co.kr/fair1304/index.html#menu1

여기 보시면 메뉴누르면 이미지가 오르락 내리락하는데 html 태그를 사용한건가요??

이런 홈페이지 작업하려고하는데.. 팁좀 부탁드리겠습니다!
|
글쓰기

댓글 6개

땅땅발발이
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
스크립트요~ ㅎㅎ
불불바람
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
css에 position, z-index 속성을 알아보시면 쉽게 하실수 있습니다.
불불량학생
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
jquery 공부하세요
검검은여우
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
스크롤 반응 빼고 기본 메뉴만 한번 흉내 내봤습니다.
나머지 연구는 ... 화이팅입니다. ㅡ.ㅡㅋ

<!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>
도도룡이
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
감사합니다~
클클라이언트
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
주석이 없어서 아쉽네요,.
이전글목록다음글
댓글을 작성하시려면 로그인이 필요합니다. 로그인

자유게시판

+
제목 글쓴이 날짜 조회
12년 전 조회 1,122
12년 전 조회 1,257
12년 전 조회 1,074
12년 전 조회 1,339
12년 전 조회 1,698
12년 전 조회 1,114
12년 전 조회 1,370
12년 전 조회 1,089
12년 전 조회 1,092
12년 전 조회 1,234
12년 전 조회 1,092
12년 전 조회 1,110
12년 전 조회 1,387
12년 전 조회 1,730
12년 전 조회 1,220
12년 전 조회 1,979
12년 전 조회 1,736
12년 전 조회 1,106
12년 전 조회 1,349
12년 전 조회 1,084
12년 전 조회 1,811
12년 전 조회 1,124
12년 전 조회 3,206
12년 전 조회 1,315
12년 전 조회 1,164
12년 전 조회 2,885
12년 전 조회 1,498
12년 전 조회 1,798
12년 전 조회 1,100
12년 전 조회 1,382
이전 첫 페이지 다음
글쓰기
🐛 버그신고