본문 바로가기
기타 HTML 코드

플로팅 배너 소스

by 우아한친구들 2017. 9. 7.
반응형

 

원하는 위치에 플로팅 되는 소스 입니다.

찾으시는 분들도 있으신듯 하고, 정작 사용하려고하면 불편한 것도 있는듯 하여

저도 검색을 통해 해보고 적용해 보니 간단하고 간편하고

이미지 배너 뿐만이 아니라 다른 기능을 넣어서도 사용이 가능한듯 하여 활용하시면 좋을듯 합니다.

 

이미지 대신 다른 메뉴나 기능을 넣어서 다양하게 사용이 가능 합니다.

 

보통 tail.php 하단에 넣어 주시면 됩니다..

 

아래 이미지 참조

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
/* 떠다니는 메뉴 (Floating Menu) */
#floatdiv {
    position:fixed; _position:absolute; _z-index:-1;
    width:160px; /* 가로폭 조절*/
    overflow:hidden;
    right:45%;
    top:24%; /* 이미지 높이 조절 */
    background-color: transparent;
    margin-right: -530px; /* 좌우측 여백 조절 */
    padding:0;
}#floatdiv ul  { list-style: none; }
#floatdiv li  { margin-bottom: 2px; text-align: center; }
#floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; }
#floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; }
#floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; }
</style>
<div id="floatdiv">
<ul>
<a href='이미지 링크주소' target='_blank'>
<img src='이미지주소' /></a>
</ul>
</div>

반응형

댓글