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

html로 작업한거같은데 초보가 질문좀 드립니다 ㅠ > 자유게시판

자유게시판

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

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

도룡이 자기소개 아이디로 검색 회원게시물 (106.♡.♡.219)
2013.04.16 16:03:23
조회 1,154
댓글 6

본문

http://weddingcool.co.kr/fair1304/index.html#menu1

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

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

댓글 6개

땅발발이 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

(112.♡.♡.109)

13.04.16 16:06:56

스크립트요~ ㅎㅎ

불바람 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

(119.♡.♡.86)

13.04.16 18:49:04

css에 position, z-index 속성을 알아보시면 쉽게 하실수 있습니다.

불량학생 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(116.♡.♡.213)

13.04.16 22:51:01

jquery 공부하세요

검은여우 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

(180.♡.♡.158)

13.04.16 23:27:08

스크롤 반응 빼고 기본 메뉴만 한번 흉내 내봤습니다.
나머지 연구는 ... 화이팅입니다. ㅡ.ㅡㅋ

<!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>