메뉴 보이기
Profile
이온디

2013.08.09

jQuery

왼쪽에 숨겨진 레이어를 보여주자

조회 수 4251 추천 수 0
출처 및 URL http://phpschool.com/gnuboard4/bbs/board...=#c_229759 
소스 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
.block {
position: relative;
background-color: #abc;
width: 400px;
height: 40px;
float: left;
left:-400px;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div style="position:absolute; left:0px;">
<div id="go" style="background:red;width:20px;height:100%;float:right;text-align:center;">»</div>
<div class="block">

$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, {
duration: "slow"
});

$( "p" ).animate({
height: "toggle",
opacity: "toggle"
}, "slow" );
</div>
</div>

<script>
$( "#go" ).click(function() {
$( ".block" ).animate({
width: "toggle",
left: 0
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>

</body>
</html> 

기본적인 사용은 여기에서 가져왔습니다.

http://oscarotero.com/jquery/


잠시 일이 있어 간단하게 코드만 적어놓고 갑니다. =3=33


위 소스를 이용해 만든 예제 입니다.


twitter_slide_widget.zip


위 예제의 스크린샷입니다. 

기본으로 화살표가 숨겨져 있고, 화살표를 누르면 숑~ 하는 느낌으로 나타납니다. 예쁘근영!

(팁으로, 화살표는 패딩값을 10픽셀 이상 줬습니다. 그만큼 왼쪽으로 마진값을 넣어줬구요. 오른쪽 패딩값은 넉넉하게 20픽셀 줬습니다.)


디자인을 추가하자면, 탭형식으로 공지사항, 트위터, 페이스북, 등록된 상품 이런 최근 게시물을 넣을 수 있습니다.

jQuery 슬라이드로 휙휙 이동하게끔 보여지면, 작은 공간을 충분히 잘 활용할 수도 있구요. ^^


scr_jquery_animate_toggle.png

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
[jQuery] 왼쪽에 숨겨진 레이어를 보여주자 2013.08.09 4251
138 [Script] 전체화면 레이어 팝업 소스 2013.08.09 12007
137 [웹폰트] Daum font로 Google Font API 따라잡기 2013.08.09 4050
136 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커 2013.08.07 5733
135 [웹폰트] 구글 웹폰트 서비스 이용하기 2013.08.06 4522
134 [웹접근성] 웹 접근성 이슈 2013.08.06 5118
133 [HTML5] IE보완 - 조건부 주석 2013.08.06 4850
132 [웹접근성] 웹접근성이란 2013.08.06 3842
131 [HTML5] img style 속성 2013.03.12 5894
130 [Meta] Meta Tag(메타태그) 사용법 2013.03.05 6850
129 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5645
128 [부트스트랩] #1 부트스트랩이란? 2013.03.01 4089
127 [HTML5] HTML5 시멘틱 구조 태그 2013.02.28 4667
126 [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 2013.02.25 3695
125 [부트스트랩] 기본 부트스트랩 템플릿 2013.02.24 4026
124 [PHP] 쿠키를 굽자 2013.02.22 3519
123 [Script] 자바스크립트로 CSS 불러오기 2013.02.22 4522
122 [UI] jquery menu slide 2012.12.16 9008
121 [Script] 로그인창 띄우기 2012.12.14 4686