간만에 자바스크립트 관련 포스트를 작성합니다. jQuery를 기반으로 작성된 CSS Dock Menu를 Prorotype에서도 사용할 수 있도록 컨버전했습니다. 원작자이신 N.Design의 Stefan Petre씨는 이 컴포넌트를 Packed(암호화 압축) 상태로 배포했기 때문에 도무지 소스를 분석할 엄두도 못내고 있었지만, Unpacker가 있다는 사실을 알게 되었습니다. Unpack과 함께 Beautify(코드를 아름답게)를 입혀 주니 원본소스와 다를게 없군요. 알아볼 수 있게 된 김에 즉흥적으로 해 치워버린 작업이 되겠습니다. 위에 적용해 놓은 데모에서 직접 사용해 보세요. 적용시키는 방법은 아래와 같습니다.
마크업:
<div id="dock">
<div>
<a href="#"><span>Home</span><img src="images/home.png" alt="" /></a>
<a href="#"><span>Contact</span><img src="images/email.png" alt="" /></a>
<a href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="" /></a>
<a href="#"><span>Music</span><img src="images/music.png" alt="" /></a>
<a href="#"><span>Video</span><img src="images/video.png" alt="" /></a>
<a href="#"><span>History</span><img src="images/history.png" alt="" /></a>
<a href="#"><span>Calendar</span><img src="images/calendar.png" alt="" /></a>
<a href="#"><span>Links</span><img src="images/link.png" alt="" /></a>
<a href="#"><span>RSS</span><img src="images/rss.png" alt="" /></a>
<a href="#"><span>RSS2</span><img src="images/rss2.png" alt="" /></a>
</div>
</div>
스크립트:
new Fisheye('dock',{
maxWidth: 60, /* 아이콘의 최대 크기 */
items: 'a', /* 너비가 적용될 앨리먼트 */
itemsText: 'span', /* 문자열의 태그이름 */
itemWidth: 40, /* 아이콘의 기본 크기 */
proximity: 80, /* 반응 범위 */
valign: 'bottom', /* 수직 정렬 */
halign : 'center' /* 가로 정렬 */
});
Prototype 기반 맥 스타일 Dock Menu - Firejune Blog
