테스트 사이트 - 개발 중인 베타 버전입니다

슬라이드 메뉴바 스크롤따라 움직이게 도움

· 15년 전 · 1756 · 1
http://sir.co.kr/bbs/tb.php/g4_skin/111843/01a46b6912a0d9728993c88a3e05b983

하단에 첨부한 코딩으로 조합하려 했으나 실패했습니다 도와주세효

<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>side<span>bar</span></h2>

<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>

</div>
</div>
</div>
</body>
</html>


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<style type="text/css">
body{
background:url(foo) fixed;
}
div#aside{
position:fixed;
left: 860px;
top: 20px;
_position:expression('absolute');
_left: expression(offsetParent.scrollLeft+860+'px');
_top: expression(offsetParent.scrollTop+20+'px');
}
</style>

<div id="aside">레이어</div>

<? for ($i = 0; $i < 100; $i++) { ?>
<p><?=$i?></p>
<? } ?>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

스크롤바따라 움직이게는 보니깐 자바스크립트에서 충돌이 나는거 같더라구요.

고정을 시키시는게 어떨까 합니다. 효과는 똑같이 사이드바에 따라 움직이는거처럼 보이겠죠.

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440