우측 슬라이드바 링크 문제 모르겠습니다. 정보
우측 슬라이드바 링크 문제 모르겠습니다.
본문
그누 스킨 슬라이드바 게시물에 대한 질문입니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=95267&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C&sop=and&page=4
위 게시물의 html을 열어보면 아래와 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>script.aculo.us sidebar</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
<style>
/****************************************/
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
</style>
</head>
<body>
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Slide<span>Bar</span></h2>
<ul>
<li><a href="xxx">게시판</a></li>
<li><a href="xxx">자유이미지</a></li>
<li><a href="xxx">한 줄 메모</a></li>
<li><a href="xxx">갤러리</a></li>
<li><a href="xxx">관리자메뉴</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
(링크 주소 xxx는 제 홈페이지 내부 게시판주소입니다.)
위와 같이 제가 필요한 링크만 수정하여 head에 인크루트 시켰고
첫 페이지에서 제대로 출력이 됩니다.
다만, 첫페이지에서 해당 슬라이드바의 링크를 클릭하게 되면 우측 슬라이드바는 액박으로 변합니다.
현재 홈페이지 내부 링크를 걸면 액박이 뜹니다. 액박뜬 링크를 마우스 오른쪽으로 보면
제가 클릭했던 링크가 보입니다. (본래 슬라이드바가 안보이고 이게 보이더군요)
외부링크는 당연히 우측 슬라이드바가 사라질테니 오류는 없습니다.
제가 궁금한 것은 내부 링크시 우측 슬라이드바가 첫페이지에서 출력된 것과 같이
보이게 하는 방법이 궁금합니다.
왜 내부링크하면 액박이되면서 내부링크주소가 가지고 있는지 모르겠습니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=95267&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C&sop=and&page=4
위 게시물의 html을 열어보면 아래와 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>script.aculo.us sidebar</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
<style>
/****************************************/
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
</style>
</head>
<body>
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Slide<span>Bar</span></h2>
<ul>
<li><a href="xxx">게시판</a></li>
<li><a href="xxx">자유이미지</a></li>
<li><a href="xxx">한 줄 메모</a></li>
<li><a href="xxx">갤러리</a></li>
<li><a href="xxx">관리자메뉴</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
(링크 주소 xxx는 제 홈페이지 내부 게시판주소입니다.)
위와 같이 제가 필요한 링크만 수정하여 head에 인크루트 시켰고
첫 페이지에서 제대로 출력이 됩니다.
다만, 첫페이지에서 해당 슬라이드바의 링크를 클릭하게 되면 우측 슬라이드바는 액박으로 변합니다.
현재 홈페이지 내부 링크를 걸면 액박이 뜹니다. 액박뜬 링크를 마우스 오른쪽으로 보면
제가 클릭했던 링크가 보입니다. (본래 슬라이드바가 안보이고 이게 보이더군요)
외부링크는 당연히 우측 슬라이드바가 사라질테니 오류는 없습니다.
제가 궁금한 것은 내부 링크시 우측 슬라이드바가 첫페이지에서 출력된 것과 같이
보이게 하는 방법이 궁금합니다.
왜 내부링크하면 액박이되면서 내부링크주소가 가지고 있는지 모르겠습니다.
댓글 전체