흠... 저도 이리저리 돌아다니다 발견한 사이트에서 재미나게 보여 적용하게 되었습니다. 참고로 상단에 about, gallery 처럼 재미나게 표현할 수 있습니다.
그에 관한 스크립트는 http://script.aculo.us에서 다운받으실 수 있습니다. (JavaScript에 관해 문외한이고, 영어에 약한지라 자세한 내용은 저도 잘 모릅니다.)
다운받은 scriptaculous-js-1.8.1.zip 를 풀어보면 여러가지 Functional Tests 를 할 수 있는데, 테스트해보시고 맘에 드시는 걸 적용하시면 될겁니다.
제가 적용한 스르륵 열리는 방법(Toggle slide)에 대해서만 간단히 적어봅니다.
1. 우선 다운받은 파일을 업로드 합니다.
prototype.js 파일과 scriptaculous.js, builder.js, effects.js, dragdrop.js, controls.js, slider.js
이렇게 총 7개 파일입니다.
2. <head></head> 사이에 불러올 스크립트를 넣습니다.
예)<script type="text/javascript" src="./images/prototype.js" ></script>
<script type="text/javascript" src="./images/scriptaculous.js" ></script>예에서 보이듯, 위의 두개파일만 불러들이면 나머지파일은 자동으로 인식한다고합니다. 단, 파일들이 같은 위치(경로)에 있어야 합니다.
3. 해당 부분(보이지 않다가 스르륵 열리는 부분)을 만듭니다.
이때 보일때와 안보일때의 모습을 감안해서 들어갈 위치를 잘 잡으셔야합니다. 그리고 해당부분을 id로 묶어둡니다. 첨부터 보이지 않게 설정하시려면 style="display:none;" 이렇게 합니다.
예)<div id="d1" style="display:none; width:450px; padding:10px; background-color:#fff;">
<p>들어갈 내용들...<br/>들어갈 내용들...</p>
<p>들어갈 내용들...<br/>들어갈 내용들...</p>
</div>4. 마지막으로 링크를 겁니다.
<a href="#" onclick="Effect.toggle('d1','slide'); return false;">Toggle slide 테스트</a>5. 위의 간단한 예 적용
테스트해보시고 적당히 적용하시면 될꺼 같네요~
마지막으로 저도 자세히 읽기보단 낼름 적용한뒤라 다른 문제점에 대해선 잘 모르겠습니다.
'blog > skin & tip' 카테고리의 다른 글
| 블로그 스킨, Easy Black (247) | 2008/02/19 |
|---|---|
| 여러가지 동적인 표현을 할 수 있는 ScriptAculous-js (36) | 2008/01/30 |
| 스크롤 따라 움직이는 메뉴 (66) | 2008/01/30 |
| 만들다 지친 블로그 스킨, Dirty Engineer (13) | 2008/01/12 |
Twitter
follow me on Twitter
Delicious
Flickr