워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

이전글 에서 하나의 버튼으로 두가지 기능을 하는 토글효과를 이용한 슬라이딩 메뉴를 알아보았는데 이것은 html요소를 위 아래로만 감추거나 나타나게 하고 좌우로 슬라이딩효과를 주려면 제이쿼리의 animate 기능을 이용합니다. 화면 밖에 감추었다가 버튼을 클릭하면 화면 안으로 나타나게 하는 슬라이딩 애니메이션 효과를 알아봅니다.

업그레이드 버전은 아래의 링크에 있습니다.

https://martian36.tistory.com/1559


<head>

<title>Untitled Document</title>
 
<style type="text/css">
#effect { width: 240px; height: 135px;  position: fixed;  left:-200px; top:45%;}
// 제이쿼리 타겟 대상으로 이 div에 대해서 애니메이션합니다. 포지션은 고정위치로 스크롤해도 정지되어있습니다. left는 화면 좌측끝을 의미하고 -200픽셀이니까 화면 밖으로 나가 있습니다. top은 화면 상단으로부터 45%에 위치합니다.

               #content { width:200px; float:left; }
//버튼과 좌우로 나란히 있게 하기 위해 float를 사용합니다.
#button { float:left; position:relative; width:40px; height:30px; background:url(button1.gif); text-indent:-9999px; cursor:pointer;}
//html코드에서 div="button" 에 버튼이미지를 배경으로 넣고 텍스트는 안보이게 합니다. 이부분의 이미지는 처음 로딩시 화면에 나오게 하고 클릭하면 사라지기 때문에 제이쿼리 코드에 별도로 이미지를 삽입합니다.


버튼이미지는 두개를 사용하는데 하나는 열리고 다른 하나는 닫을때 나타나는 이미지입니다.
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
//구글의 제이쿼리 라이브러리를 사용하면 서버에 제이쿼리를 별도로 설치할 필요가 없습니다. 
 
jQuery(function() {
jQuery( "#button" ).toggle(
function() {
jQuery( "#effect" ).animate({left: 0}, 500 ); //애니메이션시켜서 위치를 -200에서 0으로 이동합니다. 500은 애니메이션 되는 시간으로 밀리(mili)초로 0.5초입니다. 
jQuery( "#button" ).css({"background":"url(button2.gif)"}); //버튼 div에 스타일을 주는 방법으로 배경이미지를 삽입합니다. 이곳을 클릭하면 닫는 이미지로 전환됩니다.
},
function() {
jQuery( "#effect" ).animate({left: '-200px'}, 500 ); //이곳을 클릭하면 다시 원위치로 갑니다.
jQuery( "#button" ).css({"background":"url(button1.gif)"}); // 열리는 버튼이미지로 전환됩니다.
}
);
});
</script> 
</head>
 
<body>


<div id="effect">
   <div id="content">
이글이 도움이 되셨다면 추천↑ 부탁드립니다. 
</div>
<div id="button">
<p><a href="#">Toggle</a></p>
</div>

</div>

</body>
</html>

에디터에 코드를 입력하고 웹브라우저에 실행하면 아래 데모링크처럼 잘 되는데 블로그에서는 열리고 닫는 두개의 이미지가 나타나지 않아서 하나의 이미지를 사용했습니다. 

slideleft2.html

buttons.zip



데모링크

링크


오른쪽에 배치할 경우의 파일은 아래를 사용하면 됩니다. 



댓글 (32)

댓글 목록