웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!!
2007.02.03 11:07
다들 아시죠. 슬라이딩 메뉴!!
웬만한 홈페이지는 다 들어가 있죠.
간단합니다.
젤 쉽게 하는방법입니다.
나모나 드림위버에 밑에 쏘스를 붙여넣기 하시고
편집모드에서 마음대로 수정하시면 됩니다.
수정하시고 편집(EDIT)모드에서 레이어 자체를 복사해서 꾸미시는 페이지에 붙여넣기 하시고 위치만 잡아주시면 됩니다.
쏘스 방식은
하나의 레이어 안에 테이블이 들어가고 그안에 내용이 들어가는 거죠.
직접 편집모드에서 보시면 아실거에요.
설정해줄신건 Y축 시작위치만 설정해주시면 다른건 건드릴거 없습니다.
X축위치는 편집모드에서 레이어 X축 위치만 마음대로 잡아주시면 됩니다.
쏘스가 BODY안데 들어가는것 주의 해주세요.
그럼 다들 멋진 홈피 만드시길!! +_+
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<DIV id="divMenu"
style="width:150px; height:232px; position:absolute; left:888px; top:196px; z-index:1;">
<!--떠다니는 레이어 스크립트-->
<SCRIPT language=JavaScript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
if ( bNetscape4plus ) {
yMenuFrom = document["divMenu"].top;
yMenuTo = top.pageYOffset + 300;
}
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 195; <-- Y축 시작위치 설정
}
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 100)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divLinkButton"].top += yOffset;
else if ( bExplorer4plus )
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divMenu"].top += yOffset;
else if ( bExplorer4plus )
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad()
{
var y;
if ( top.frames.length )
if ( bNetscape4plus ) {
document["divMenu"].top = top.pageYOffset + 135; //넷스케이프용 로딩시 시작 레이어 좌표 값
document["divMenu"].visibility = "visible";
}
else if ( bExplorer4plus ) {
divMenu.style.top = document.body.scrollTop + 135; //익스플로러용 로딩시 시작 레이어 좌표 값
divMenu.style.visibility = "visible";
}
CheckUIElements();
return true;
}
OnLoad();
-->
</SCRIPT>
<!--/떠다니는 레이어 스크립트-->
<!-- 레이어 내용부분 시작-->
<TABLE cellSpacing=5 cellPadding=0 width=100 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD height="60">
<p><img src="이미지경로" width="93" height="200" border="0"></p> <-- TEXT건 이미지건 원하시는 대로 수정하시면 됩니다.
</TD></TR>
</TBODY></TABLE></TD></TR></TBODY></TABLE>
<!-- /레이어 내용부분 끝-->
</DIV>
</body>
웬만한 홈페이지는 다 들어가 있죠.
간단합니다.
젤 쉽게 하는방법입니다.
나모나 드림위버에 밑에 쏘스를 붙여넣기 하시고
편집모드에서 마음대로 수정하시면 됩니다.
수정하시고 편집(EDIT)모드에서 레이어 자체를 복사해서 꾸미시는 페이지에 붙여넣기 하시고 위치만 잡아주시면 됩니다.
쏘스 방식은
하나의 레이어 안에 테이블이 들어가고 그안에 내용이 들어가는 거죠.
직접 편집모드에서 보시면 아실거에요.
설정해줄신건 Y축 시작위치만 설정해주시면 다른건 건드릴거 없습니다.
X축위치는 편집모드에서 레이어 X축 위치만 마음대로 잡아주시면 됩니다.
쏘스가 BODY안데 들어가는것 주의 해주세요.
그럼 다들 멋진 홈피 만드시길!! +_+
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<DIV id="divMenu"
style="width:150px; height:232px; position:absolute; left:888px; top:196px; z-index:1;">
<!--떠다니는 레이어 스크립트-->
<SCRIPT language=JavaScript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
if ( bNetscape4plus ) {
yMenuFrom = document["divMenu"].top;
yMenuTo = top.pageYOffset + 300;
}
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 195; <-- Y축 시작위치 설정
}
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 100)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divLinkButton"].top += yOffset;
else if ( bExplorer4plus )
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divMenu"].top += yOffset;
else if ( bExplorer4plus )
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad()
{
var y;
if ( top.frames.length )
if ( bNetscape4plus ) {
document["divMenu"].top = top.pageYOffset + 135; //넷스케이프용 로딩시 시작 레이어 좌표 값
document["divMenu"].visibility = "visible";
}
else if ( bExplorer4plus ) {
divMenu.style.top = document.body.scrollTop + 135; //익스플로러용 로딩시 시작 레이어 좌표 값
divMenu.style.visibility = "visible";
}
CheckUIElements();
return true;
}
OnLoad();
-->
</SCRIPT>
<!--/떠다니는 레이어 스크립트-->
<!-- 레이어 내용부분 시작-->
<TABLE cellSpacing=5 cellPadding=0 width=100 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD height="60">
<p><img src="이미지경로" width="93" height="200" border="0"></p> <-- TEXT건 이미지건 원하시는 대로 수정하시면 됩니다.
</TD></TR>
</TBODY></TABLE></TD></TR></TBODY></TABLE>
<!-- /레이어 내용부분 끝-->
</DIV>
</body>
댓글 4
-
tomi
2007.02.03 16:24
-
최성칠
2007.02.08 11:45
오류나와요...ㅡ.ㅡ
y축 설정하는 데에서 오류나오네요... -
박선미
2007.02.10 23:49
네 저두 구문오류라고 나오네요
http://www.salesiansisters.or.kr/index00.html인데요.
오류정보를 보면
줄 : 133
문자 : 63
오류내용 : 구문오류
코드 : 0
이렇게 나오네요
133줄의 내용은
yMenuFrom = document["divMenu"].top;
입니다 -
하늘누리
2007.03.13 17:42
yMenuTo = document.body.scrollTop + 195; <-- Y축 시작위치 설정
에서 <-- Y축 시작위치 설정 을 지워주거나 //로 주석처리 해보세요
제목 | 글쓴이 | 날짜 |
---|---|---|
[동주아빠] PHP 게시판 만들기 기초 (6) require,include [5] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (5) 제어문(下) [10] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (5) 제어문(上) [9] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (4) 연산자 [10] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (3) 변수와 배열 [6] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (2) [12] | 손병목 | 2002.12.25 |
[동주아빠] PHP 게시판 만들기 기초 (1) 준비 [8] | 손병목 | 2002.12.25 |
if 문으로 xxx.php?db=src 이런식으로 해보자..(제1탄 기초를 확!) [14] | inging-zb41 | 2002.12.12 |
왕초보용 개판 오분전 황당 쿠키(4) [2] | 미친개 | 2002.12.09 |
왕초보용 개판 오분전 황당 쿠키(3) [2] | 미친개 | 2002.12.09 |
왕초보용 개판 오분전 황당 쿠키(2) [6] | 미친개 | 2002.12.09 |
왕초보용 개판 오분전 황당 쿠키(1) [4] | 미친개 | 2002.12.09 |
PHP 각종 오류 정리 [15] | TheMics | 2002.12.04 |
MYSQL CLASS | 위선OSE | 2002.12.03 |
파일처리 - fseek [3] | 위선OSE | 2002.12.03 |
제로카운터 접속자 수 조정, 최고 간편한 팁(5초 소요, DB보존) [4] | 고광욱 | 2002.12.01 |
카드 결재시 사용되는 자바스크립트와 html [3] | 한꼬마 | 2002.11.28 |
카드 결재 개요 (텔렉) [2] | 한꼬마 | 2002.11.26 |
휴대폰 결재 활용 (최종) | 한꼬마 | 2002.11.26 |
휴대폰 결재 설치 및 테스터 [3] | 한꼬마 | 2002.11.24 |
스크롤 메뉴가 이상하게 작동하지 않거나
내용글을 볼 때 엉뚱한 방향으로 움직인다면
스크립트 오류일까요? 아님 게시판 소스와 충돌을 일으켜서 그러는 걸까요???