열기 닫기 아코디언(?) 토글(?) 형식 배너 만들기
입맛에 맞게 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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5396 | 기타 |
슈퍼스타맨
|
3개월 전 | 334 | |
| 5395 | PHP |
untitled
|
5개월 전 | 808 | |
| 5394 | MySQL |
선택과집중
|
5개월 전 | 582 | |
| 5393 | 웹서버 |
techstar
|
7개월 전 | 850 | |
| 5392 |
|
1년 전 | 1205 | ||
| 5391 | 9개월 전 | 1108 | |||
| 5390 | 9개월 전 | 893 | |||
| 5389 | 8개월 전 | 864 | |||
| 5388 | 8개월 전 | 964 | |||
| 5387 | 7개월 전 | 796 | |||
| 5386 | JavaScript |
nekoieye
|
7개월 전 | 959 | |
| 5385 | 웹서버 | 7개월 전 | 979 | ||
| 5384 | JavaScript |
|
8개월 전 | 801 | |
| 5383 | 기타 | 9개월 전 | 1116 | ||
| 5382 | 기타 |
|
9개월 전 | 566 | |
| 5381 | JavaScript | 9개월 전 | 895 | ||
| 5380 | 기타 |
|
9개월 전 | 677 | |
| 5379 | JavaScript | 10개월 전 | 680 | ||
| 5378 | 10개월 전 | 1188 | |||
| 5377 | 기타 |
|
10개월 전 | 751 | |
| 5376 | jQuery |
|
10개월 전 | 560 | |
| 5375 | jQuery |
techstar
|
10개월 전 | 717 | |
| 5374 | 기타 |
|
10개월 전 | 765 | |
| 5373 | MySQL |
|
11개월 전 | 799 | |
| 5372 | 기타 |
|
11개월 전 | 1001 | |
| 5371 | JavaScript |
|
11개월 전 | 713 | |
| 5370 | JavaScript |
|
11개월 전 | 718 | |
| 5369 | PHP |
|
11개월 전 | 1231 | |
| 5368 | PHP | 11개월 전 | 1397 | ||
| 5367 | 기타 |
nekoieye
|
1년 전 | 1271 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기