저번에 부드럽게 스크롤바를 따라다니는 퀵메뉴 만드는거에 설명 들였었는데요..
- 티스토리에 적용가능한 퀵메뉴~(스크롤 따라 움직이는메뉴)
그때 설명들였던 소스는 자바를 써서 블로그가 느려진다는 단점이 잇다고 하네요.
그래서 이번엔 자바 를 쓰지않고 html 소스로만 가능한 퀵메뉴를 만들어 볼게요~
간단한 소스라서 자바를 이용할때처럼 스크롤바를 따라다니는 액션은 없습니다~~
단순 고정 퀵메뉴에요 ㅎ
- 티스토리에 적용가능한 퀵메뉴~(스크롤 따라 움직이는메뉴)
그때 설명들였던 소스는 자바를 써서 블로그가 느려진다는 단점이 잇다고 하네요.
그래서 이번엔 자바 를 쓰지않고 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>
<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> 사이에넣어주세요
<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 링크걸기~
화면에서 보여질 박스(이미지 위치할부분)화면 좌측 에서부터 거리
top:200px
화면에서 보여질 박스(이미지 위치할부분)화면 상단 에서부터 거리
width:100px
박스 가로 크기
height:300px
박스 세로 크기
background:#transparent
박스 바탕 색입니다 저같은 경우 바탕 색이 필요없어서 투명으로 했습니다 (:#transparent 투명소스값)
링크 및 이미지 주소
공지 처럼 텍스트만 넣어주실수도있고 이미지와 이미지에 링크까지 걸수있습니다
아래 소스 보시고 수정하시면 됩니다.
<a title="마우스오버시 설명" href="링크될주소"><img src="이미지주소"></a>
- HTML 링크걸기~
저도 예전에 받아논 소스 수정해서 티스토리 블로그에 쓰는거라
다른 블로그에서 정상 작동하는지는 확인하지 못했지만..
드림위버상 잘 작동하는걸로 봐서 괜찬지 않을까 생각 돼네요 ㅎㅎ
관련링크
- HTML 링크걸기~
- 티스토리에 적용가능한 퀵메뉴~(스크롤 따라 움직이는메뉴)
'홈페이지 제작 > 드림위버&블로그&컴퓨터' 카테고리의 다른 글
| Daum view AD 때문에 블로그 초심을 잃어 가다. (0) | 2010.07.01 |
|---|---|
| 티스토리 폐이지 로딩의 주범 ?? 너로구나 믹시(mixsh) !! (0) | 2010.06.30 |
| 메타 블로그 구독버튼 아이콘 모음 (jpg,psd) (0) | 2010.06.26 |
| vecteezy 사이트에 파일 올려봤어요 ^^ (0) | 2010.06.25 |
| 오호!! 다음뷰 베스트글 선정. (0) | 2010.06.24 |