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

상단 가운데 정렬 , 스크롤시 상단에 고정...

· 12년 전 · 2961 · 5

<style type="text/css">
#topmenu {margin:0px auto; width:100%;text-align:center;position:fixed;top:0px;}
.topmenu_div { background-color:#dfdfdf;display:none;padding:0px;margin:0px;border-bottom: 0px solid #bebebe;}
.close_bottom { position:absolute;right:10px;top:10px;cursor:pointer;padding:0px; }

#topmenu_bottom_div{width:115px;margin:-1px auto; z-index:1000;text-align:center;overflow:hidden;border: 1px solid #bebebe;background-color:#dfdfdf;}
.topmenu_bottom {float:left;padding:5px 10px;cursor:pointer;}
</style>

 

 

<div id="topmenu">

 <div id="topmenu_div1" class="topmenu_div">
  시간표 </div>

 <div id="topmenu_div2" class="topmenu_div">
  메뉴2<br>메뉴2<br>메뉴2
 </div>

 <div id="topmenu_bottom_div">
  <div id="topmenu_1" class="topmenu_bottom">12반</div>
  <div id="topmenu_2" class="topmenu_bottom">13반</div>
 </div>
</div>


<div>
<? for($n = '1' ; $n <= '50'; $n++ ){?>
<?=$n?><br>
<?}?>

</div>


<script type="text/javascript">
$(document).ready(function(){

 $("#topmenu_1").click(function () {

  if($("#topmenu_div1").hasClass("div_show") == true) {
   $("#topmenu_div1").slideUp("fast");
   $("#topmenu_div1").removeClass("div_show");
  } else if($("#topmenu_div1").hasClass("div_show") == false) {
   $("#topmenu_div2").slideUp("fast");
   $("#topmenu_div1").addClass("div_show");
   $("#topmenu_div1").slideDown("fast");
   $("#topmenu_div2").removeClass("div_show");
  }

 });

 $("#topmenu_2").click(function () {

  if($("#topmenu_div2").hasClass("div_show") == true) {
   $("#topmenu_div2").slideUp("fast");
   $("#topmenu_div2").removeClass("div_show");
  } else if($("#topmenu_div2").hasClass("div_show") == false) {
   $("#topmenu_div2").addClass("div_show");
   $("#topmenu_div2").slideDown("fast");
   $("#topmenu_div1").slideUp("fast");
   $("#topmenu_div1").removeClass("div_show");
  }

 });

});
</script>

댓글 작성

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

로그인하기

댓글 5개

여러가지 정보들 얻네요
감사합니다
좋은 정보 감사합니다.
좋은정보 감사합니다.
정보 감사합니다

게시글 목록

번호 제목
20636
20632
20627
11160
20626
20625
20619
17684
20182
11154
11151
11143
20607
20601
11131
11124
11121
11118
11113
11109
20587
11102
11098
11092
11086