상단 가운데 정렬 , 스크롤시 상단에 고정...
<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개