본문 바로가기
쓸데없는 아이디어와 마케팅

[티스토리 스킨 수정] 우측 슬라이드 메뉴

by 서민당총재 2013. 2. 3.
반응형

블로그 스킨을 수정하다보면 한번 사용한 기능을 누락하는 경우가 많이 있습니다.
저는 자주 그러는 편인데, 그래도 꼭 넣는 기능들이 있는데, 그 기능중 하나가 우측 슬라이드 메뉴입니다.
이 우측 슬라이드메뉴는 제가 만든건 아니고 다른분 블로그에서 소스를 보고 약간만 수정해서 제 블로그에 넣은 기능입니다.

그 기능의 화려함은 많은 분들이 괜찮았는지 많이 물어들 보셔서 이리저리 알려드렸다가 오늘 OCer님이 물어보셔서 적을 글도 없는데 이거나 적어보자는 마음에 작성해 봅니다. ^ ^ 


/'pəlp/ 님의 블로그 우측메뉴를 보고만들었습니다.



우측 슬라이드 메뉴


우측 슬라이드 메뉴는 어떠한 크기에서도 우측에 존재합니다.
플로팅배너와 달리 지정된 위치에 존재하는 형태가 아니라서 우측기준으로 항상 보이니 광고를 넣으신다면 해상도에 따라서 본문을 가려 불이익을 당할 수 있습니다.

 
'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/ 님에게 하신다음에 ㅋㅋ
 


반응형

댓글