반응형
블로그 스킨을 수정하다보면 한번 사용한 기능을 누락하는 경우가 많이 있습니다.
저는 자주 그러는 편인데, 그래도 꼭 넣는 기능들이 있는데, 그 기능중 하나가 우측 슬라이드 메뉴입니다.
이 우측 슬라이드메뉴는 제가 만든건 아니고 다른분 블로그에서 소스를 보고 약간만 수정해서 제 블로그에 넣은 기능입니다.
그 기능의 화려함은 많은 분들이 괜찮았는지 많이 물어들 보셔서 이리저리 알려드렸다가 오늘 OCer님이 물어보셔서 적을 글도 없는데 이거나 적어보자는 마음에 작성해 봅니다. ^ ^
우측 슬라이드 메뉴
우측 슬라이드 메뉴는 어떠한 크기에서도 우측에 존재합니다.
플로팅배너와 달리 지정된 위치에 존재하는 형태가 아니라서 우측기준으로 항상 보이니 광고를 넣으신다면 해상도에 따라서 본문을 가려 불이익을 당할 수 있습니다.
'pəlp/님께서 간단하지만 아주 이쁘게 만드셔서 어디다 가져다 붙여도 이쁘게 보입니다.
지금 저는 필독공지용으로 사용중에 있습니다.
저거보면 웬지 마우스를 가져가고 싶은 모습이 아닌가요? ^ ^
우측 슬라이드 메뉴 적용하기
적용방법은 어렵지 않습니다.
저는 처음에 좀 어렵게 했지만 제가 작성하는 것만 잘 같다 붙이시면 어렵지 않습니다.
전문적인 지식없이 복붙만 하는 사람이기에 기능에 대한 자세한 설명은 불가능합니다.
질문 받아도 답변할 능력이 없습니다. ㅠ,.ㅠ
[HTML 추가부분]
<head>
<!--오른쪽 슬라이드 메뉴 시작-->
<!--오른쪽 슬라이드 메뉴 시작-->
<section id="side_fixed_button">
<a class="notice_button" href=""></a>
</section>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
});
</script>
<!--오른쪽 슬라이드 메뉴 종료-->
<!--오른쪽 슬라이드 메뉴 종료-->
</head>
[CSS 추가부분]
.side_button{position:fixed;top:235px;right:0;width:65px;height:30px;background:#FBC700;border-radius:3px 0 0 15px;-moz-border-radius:3px 0 0 15px;-webkit-border-radius:3px 0 0 15px;-text-align:left;text-transform:uppercase;font-size:.9em;line-height:30px;color:#fff;padding-left:10px;z-index:0;-moz-background-clip:border;-webkit-background-clip:border-box;background-clip:border-box;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.side_button:link,.side_button:visited,.side_button:hover,.side_button:active,.side_button:focus{color:#fff;text-decoration:none}
.side_button:hover{width:80px;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out}
.notice_button{ z-index: 1; position:fixed;top:140px;right:0;width:120px;height:120px; background:url(images/notice_button.png);-webkit-background-clip:border-box;background-clip:border-box;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.notice_button:hover{ z-index: 1; width:700px;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out}
이 부분에서 자신들이 올릴 이미지에 맞게끔 사이즈부분만 수정하시면 간단하게 적용할 수 있습니다.
감사의 인사는 /'pəlp/ 님에게 하시면 됩니다 ^ ^
저에게 해주셔도 좋지만 저에게 할 거라면 /'pəlp/ 님에게 하신다음에 ㅋㅋ
반응형
댓글