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

도룡이

· 12년 전 · 조회 1229 1229 · 댓글 6 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년 전

주석이 없어서 아쉽네요,.

댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

제목	글쓴이	날짜	조회
스킨 다운로드 [2]	끄까끄까 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,138
님들 어떻게 생각하세요~ c+v 만 해서 만든 사이트가 월매출1억을 돌파했음^^ [9]	프레스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,272
첫승.. [2]	팔콤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,089
한화~~~ 화이팅.. [5]	팔콤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,357
네이버 api가 이상하네요. [4]	드림님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,712
bounce [5]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,125
이런걸 만든 인간은 진짜 ㅡㅡ;;; [8]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,383
10 개월 넘게 뛴 주행거리 [4]	팔콤 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,108
마담X에서 문자왓는데요~ 아시는분 ㅋㅋ [4]	프레스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,104
포천 자매 살해사건 재구성. [1]	미소짓는오후 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,246
안녕하세요....처음 왔는데... [3]	허윽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,106
아~~~ 목이 따가워요~~ [2]	오빠야 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,130
헤어질때가 된듯.... [14]	윈디눈하 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,400
아 코멘트에 답변달아놓을자리에 div로만 해놧네.. [4]	프레스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,746
html로 작업한거같은데 초보가 질문좀 드립니다 ㅠ [6]	도룡이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,230
제작의뢰를 몇일간 보고 있는데... [5]	알쯔 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,992
약봉용후 만든것 같은 박명수 광고 [9]	설ri 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,753
오늘은 행운이 있을 것 같은날? [2]	엘남매아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,117
쇼핑몰을 해볼까 생각중인데요 [10]	indory 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,362
역시 일할맛 않나네요 ㅜㅜ [2]	검은여우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,096
오~ SIR에는 한문 번역 기능이 있나봐요~ㅡ.,ㅡㅋ [3]	東問西答 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,826
아 일할만안나네요 ㅋㅋ [2]	프레스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,137
MYO암밴드 제스처 블루투스로 인식하는방식	스아이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 3,217
g4s용 게시판 스킨을 판매해볼까 싶습니다. [12]	에카 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,327
오늘따라 매우 집에 가고싶네요ㅠ.ㅠ [12]	하연님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,178
보스턴 테러 폭팔 [7]	애드나라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 2,896
후힛^^ 한페이지에서 입력이랑 수정되도록 완성했습니다^^ [4]	프레스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,509
세상은 어떻게 변할까요!? Google Glass API 공개! [15]	엔피씨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,811
g4s용 스킨변환 한 건 끝났네요.ㄷㄷㄷ [7]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,112
이건 정말 참다참다 못해 폭팔했습니다. [12]	TopSchooL 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	조회 1,397

이전 첫 페이지 다음

글쓰기

커뮤니티