열기 닫기 아코디언(?) 토글(?) 형식 배너 만들기
입맛에 맞게 css나 마크업 수정하시면 될 것 같습니다.

[code]
<style>
/* Floating style start */
.FloatingWrap{position: fixed;bottom: 0;left: 0;width: 100%;background: #f00;z-index: 100;}
.FloatingBox{}
.FloatingOpen{text-align: right;position: relative;padding: 5px 50px;}
.FloatingOpen span{cursor:pointer;width: 100px;height: 70px;text-align: center;display: inline-flex;justify-content: center;align-items: center;background: #000;color:#fff}
.FloatingOpen #FloatingOpenBtn{color:#fff;}
.FloaingDB{display: none;background: #ddd;height: 250px;}
/* Floating style end */
</style>
<div class="FloatingWrap">
<div class="FloatingBox">
<div class="FloatingOpen">
<span>
<div id="FloatingText">열기</div>
<img id="FloatingOpenBtn" src="<?php echo G5_THEME_IMG_URL ?>/FloatingArrowDown.png"">
</span>
</div>
<div class="FloaingDB">
asd
</div>
</div>
</div>
<script>
$(function () {
$(".FloatingOpen span").on("click", function() {
$(".FloaingDB").slideToggle("fast", function() {
var image = $("#FloatingOpenBtn");
var text = $("#FloatingText");
if (image.attr("src").includes("FloatingArrowDown.png")) {
image.attr("src", "<?php echo G5_THEME_IMG_URL ?>/FloatingArrowUp.png");
text.text("닫기");
} else {
image.attr("src", "<?php echo G5_THEME_IMG_URL ?>/FloatingArrowDown.png");
text.text("열기");
}
image.fadeIn(2050);
});
});
});
</script>
[/code]
댓글 4개
좋아요, 감사 합니다.
감사 합니다.
좋은자료~~ 감사합니다~~
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5066 | 기타 |
DogFoot개발
|
4년 전 | 1819 | |
| 5065 | PHP |
DogFoot개발
|
4년 전 | 1529 | |
| 5064 | PHP |
happyl
|
4년 전 | 1918 | |
| 5063 | node.js |
DogFoot개발
|
4년 전 | 1675 | |
| 5062 | node.js |
DogFoot개발
|
4년 전 | 1693 | |
| 5061 | node.js |
DogFoot개발
|
4년 전 | 1416 | |
| 5060 | node.js |
DogFoot개발
|
4년 전 | 1254 | |
| 5059 | node.js |
DogFoot개발
|
4년 전 | 1250 | |
| 5058 | 기타 |
DogFoot개발
|
4년 전 | 2697 | |
| 5057 | 웹서버 |
DogFoot개발
|
4년 전 | 2726 | |
| 5056 | MySQL | 4년 전 | 1506 | ||
| 5055 | 기타 | 4년 전 | 1435 | ||
| 5054 | OS | 4년 전 | 2070 | ||
| 5053 | 웹서버 | 4년 전 | 3632 | ||
| 5052 | OS | 4년 전 | 2425 | ||
| 5051 | PHP | 4년 전 | 2189 | ||
| 5050 | 웹서버 | 4년 전 | 1720 | ||
| 5049 | MySQL | 4년 전 | 1899 | ||
| 5048 | OS | 4년 전 | 2704 | ||
| 5047 | PHP | 4년 전 | 4375 | ||
| 5046 | MySQL | 4년 전 | 1820 | ||
| 5045 | MySQL | 4년 전 | 1944 | ||
| 5044 | MySQL | 4년 전 | 4135 | ||
| 5043 | MySQL | 4년 전 | 1891 | ||
| 5042 | 기타 |
|
4년 전 | 2636 | |
| 5041 | MySQL | 4년 전 | 1998 | ||
| 5040 | MySQL | 4년 전 | 1726 | ||
| 5039 | MySQL | 4년 전 | 1500 | ||
| 5038 | MySQL | 4년 전 | 1336 | ||
| 5037 | OS | 4년 전 | 4432 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기