jQuery 패널 슬라이드 효과
페이지 정보
작성자 서방님 댓글 0건 조회 168회 작성일 13-12-19 13:55본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
<title>Simple Slide Panel</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #EEEEEE;
height: 90px;
display: none;
width: 570px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
width: 570px;
}
.btn-slide {
background-color:orange;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% tahoma;
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<div id="panel">
<div align="center">
Soccer / Baseball / Vollyball / Fighter / Special / etc
</div>
</div>
<p class="slide"><a href="#" class="btn-slide">카테고리 보기</a></p>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
