애드블럭을 사용중이시라면 댓글이라도 남겨주세요 ^ ^



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

    그 기능의 화려함은 많은 분들이 괜찮았는지 많이 물어들 보셔서 이리저리 알려드렸다가 오늘 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/ 님에게 하신다음에 ㅋㅋ
     


    신고
    Posted by 서민당총재
    • BlogIcon 이바구™
      2013.02.03 20:06 신고

      익스에서는 안 보이는데요.
      이 부분만 해결된다면 투명도를 조절해서 메뉴로 사용해도 되겠네요.

      • BlogIcon 서민당총재
        2013.02.03 20:10 신고

        익스가 css를 제대로 지원하지 않아서 나오는 결과죠.
        망할 좀 재대로 지원좀 해주면 어디 덧나는지 왜그런지 모르겠습니다.
        하지만 크롬과 파폭에서는 멋진 액션이죠 ㅎㅎ

    • BlogIcon 이바구™
      2013.02.08 11:48 신고

      이분 블로그(http://life-lineup.tistory.com/)는 다른 브라우저에서도 잘 되는데 어떻게 하는지 모르겠네요.
      총재님 기본 실력이 있으니 한번 연구해 보세요.
      완성되면 저도 좀 알려 주시고요.^^

      • BlogIcon 서민당총재
        2013.02.08 16:17 신고

        우측슬라이드 말씀이시라면
        요롱이님한테는 제가 알려드린겁니다. 0ㅁ0;;;
        이 소스 그대로요

    • BlogIcon 샤이니
      2013.10.14 21:08 신고

      그런데 HTML 부분에 </head>가 두 개 있는데 </head> 위나 아래 둘 다 상관없다는 뜻인지요? ^^
      + 첫번 째 소스는 </head> 뒤에 넣고, css소스는 맨 하단에 넣은 후 미리보기를 눌렀는데 아무런 변화가 없네요. 왜 그런지 아세요? ㅠ

      • BlogIcon 서민당총재
        2013.10.14 21:26 신고

        아! 오타네요..
        붙여넣기 신공이라..... <head>소스</head> 이렇게 안에 집어넣으셔야 합니다.

    • BlogIcon 운영관리자
      2014.07.29 17:50 신고

      아무런 반응이 없네요;;

    • 감사해요
      2016.10.10 14:00 신고

      좋은소스감사합니다^^