홈페이지 제작/드림위버&블로그&컴퓨터

[드림위버.html] 화면에 고정 돼어있는 퀵메뉴

JINSTALE 2010. 6. 29. 19:46

저번에 부드럽게 스크롤바를 따라다니는 퀵메뉴 만드는거에 설명 들였었는데요..
- 티스토리에 적용가능한 퀵메뉴~(스크롤 따라 움직이는메뉴)

그때 설명들였던 소스는 자바를 써서 블로그가 느려진다는 단점이 잇다고 하네요.

그래서 이번엔 자바 를 쓰지않고 html 소스로만 가능한 퀵메뉴를 만들어 볼게요~
간단한 소스라서 자바를 이용할때처럼 스크롤바를 따라다니는 액션은 없습니다~~
단순 고정 퀵메뉴에요 ㅎ



이미지만 으로는 어떤 효과인지 설명 들이기 힘들어서
동영상 첨부했습니다
어떤 효과인지 확인해보시고 소스 적용 하시는게 좋을거같아요 ^^



html 소스
<div style=" position:fixed; top:380px; left:1170px; width:100px; height:300px; background:#transparent">링크 및 이미지 주소</div>
위소스를 <HEAD></HEAD> 사이에 넣어주세요

위이미지 적용 소스
<div style=" position:fixed; top:380px; left:1100px; width:100px; height:300px; background:#transparent">
<a title="다음뷰"  href="http://v.daum.net/user/plus?blogurl=http://jinstale.tistory.com"  target=_blank><img src="https://t1.daumcdn.net/cfile/tistory/20132C274C25EBEC08"></a><br>
<a title="미투데이"  href="http://me2day.net/my4338"  target=_blank><img src="https://t1.daumcdn.net/cfile/tistory/147A5E194C25D8775B"></a><br>
 <a title="믹시"  href="http://mixsh.com/u/my4338"  target=_blank><img src="https://t1.daumcdn.net/cfile/tistory/160AF3194C25D87703"></a>
</div>




JINS TALE 적용 소스
<div style=" position:fixed; top:380px; left:1170px; width:100px; height:300px; background:#transparent">
<a href="#top"><img src="./images/top.png"></a>
<br>
<a href="#down"><img src="./images/down.png"></a>
</div>


위같은 상단 하단 으로 페이지 이동시 주위하실점은 TOP,DOWN 버튼이 움직일수있게 이동할 부분에 이름을 정해줘야합니다

<a name="top"></a>
TOP 버튼이 움직일수있게 위 소스를 <HEAD></HEAD> 사이에넣어주세요

<a name="down"></a>
DOWN 버튼이 움직일수있게 위 소스를 </BODY></HTML> 사이에넣어주세요




소스 설명
left:1000px
화면에서 보여질 박스(이미지 위치할부분)화면 좌측 에서부터 거리

top:200px
화면에서 보여질 박스(이미지 위치할부분)화면 상단 에서부터 거리

width:100px
박스 가로 크기

height:300px
박스 세로 크기

background:#transparent
박스 바탕 색입니다 저같은 경우 바탕 색이 필요없어서 투명으로 했습니다 (:#transparent 투명소스값)

링크 및 이미지 주소
공지 처럼 텍스트만 넣어주실수도있고 이미지와 이미지에 링크까지 걸수있습니다
아래 소스 보시고 수정하시면 됩니다.
<a title="마우스오버시 설명" href="링크될주소"><img src="이미지주소"></a>


 - HTML 링크걸기~






저도  예전에 받아논 소스 수정해서 티스토리 블로그에 쓰는거라
 다른 블로그에서 정상 작동하는지는 확인하지 못했지만..
드림위버상 잘 작동하는걸로 봐서 괜찬지 않을까 생각 돼네요 ㅎㅎ




관련링크
 - HTML 링크걸기~
 - 티스토리에 적용가능한 퀵메뉴~(스크롤 따라 움직이는메뉴)