열기 닫기 아코디언(?) 토글(?) 형식 배너 만들기
입맛에 맞게 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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5366 | 기타 |
nekoieye
|
1년 전 | 1119 | |
| 5365 | PHP | 1년 전 | 775 | ||
| 5364 | JavaScript | 1년 전 | 527 | ||
| 5363 | JavaScript | 1년 전 | 994 | ||
| 5362 | 1년 전 | 1233 | |||
| 5361 | JavaScript | 1년 전 | 1241 | ||
| 5360 |
그누보드이해하기
|
1년 전 | 777 | ||
| 5359 | 1년 전 | 1091 | |||
| 5358 | 1년 전 | 1095 | |||
| 5357 | 1년 전 | 808 | |||
| 5356 | 1년 전 | 367 | |||
| 5355 |
|
1년 전 | 586 | ||
| 5354 | 1년 전 | 1062 | |||
| 5353 |
|
1년 전 | 705 | ||
| 5352 |
|
1년 전 | 640 | ||
| 5351 | PHP | 1년 전 | 809 | ||
| 5350 | PHP | 1년 전 | 574 | ||
| 5349 | OS | 1년 전 | 647 | ||
| 5348 | 기타 | 1년 전 | 450 | ||
| 5347 | 기타 | 1년 전 | 633 | ||
| 5346 | 기타 | 1년 전 | 505 | ||
| 5345 | 기타 | 1년 전 | 400 | ||
| 5344 | JavaScript |
|
1년 전 | 430 | |
| 5343 | PHP |
|
1년 전 | 501 | |
| 5342 | jQuery | 1년 전 | 575 | ||
| 5341 | PHP |
|
1년 전 | 880 | |
| 5340 | Mobile |
슈퍼스타맨
|
1년 전 | 560 | |
| 5339 | 기타 |
|
1년 전 | 561 | |
| 5338 |
멀티트리플
|
2년 전 | 1297 | ||
| 5337 | 기타 |
슈퍼스타맨
|
2년 전 | 1792 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기