서브 가로메뉴 사용중에 서브메뉴가 가운데 정렬되지 않습니다.
본문
위에는 1920x1080 모니터의 화면 절반에 모니터를 띄었을 때 나타나는 서브메뉴입니다.
이건 전체화면으로 실행했을 때 서브메뉴입니다.
화면 크기에 따라 바뀌면안되는데 바뀌네요.
PHP 내의 자바 스크립트
<script type="text/javascript">
$(document).ready(function(){
$('.subMenuBox ul li.selBoard a:visited').css('color', 'black');
$('.subMenuBox').css('left',($('#Mmenu').width()-$('#topmenu').width())/2).width($('#topmenu').width());
$('#topmenu .wrap').Mmenu({ ok1: 0 });
$("#topmenu").find(".selGroup").find('.subMenuBox').show();
$("nav#topmenu a").mouseenter(function() {
if($("div#subBox").css("display") != "block"){
$("div#subBox").slideDown();
}
});
$("nav#topmenu").mouseleave(function() {
$("div#subBox").hide();
});
});
CSS
#topmenu .wrap div.subMenuBox{display:none;float:center;position:absolute;left:0;top:43px; height:30px;margin:0;padding:0;filter:alpha(opacity=70);opacity:0.7;background:url(./bg_sub.jpg) repeat-x 0 0;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}
#topmenu .wrap div.subMenuBox ul{margin:0;padding-left:450px;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li{margin:0;padding:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li {height:30px;}
원래는 화면 왼쪽에 붙어있었습니다.
풀화면이든 절반 화면이든
그래서 굵게 표시한 padding-left:450px; 를 추가했는데 화면 크기가 변화할때마다 위치가 바뀌네요.
어떻게하면 화면 크기가 변화해도 그 위치에 가만히 있게 할 수 있을까요
답변 1
서브메뉴의 width가 100%로 잡혀 있어서 발생되는 현상 같습니다.
배경선을 100%로 사용하되 실제 메뉴는 width값을 주고 margin:0px auto를 이용하여
가운데 정렬을 사용해보세요
#topmenu {height:73px;background:url(./bg.jpg) repeat-x 0 0; text-align:center;} /* width:970px; margin:0 auto; ==> 메뉴폭을 970으로 사용시 */
#topmenu .wrap {position:relative;height:73px;overflow:visible;width:970px;margin:0 auto;} /* 가운데 정렬: width:970px; margin:0 auto; */
#topmenu .wrap ul{position:relative;list-style:none;margin:0;padding:0;}
#topmenu .wrap ul:after{content:""; display:block; float:none; clear:both;}
#topmenu .wrap ul li{float:left;list-style:none;margin:0;padding:0;height:43px;}
#topmenu .wrap ul li.selGroup {font-style:black;}
#topmenu .wrap ul li.active{color:#000;background:#1c8d6f;border-radius:3px 3px 3px 3px;}
#topmenu .wrap ul li a{height:37px; display:block;cursor:pointer;text-decoration:none;padding:0 25px 5px 20px;color:#ffffff;font:normal 14px nanumgothic, dotum;letter-spacing:0px;display:inline-block;line-height:43px; font-weight:bold;} /* 1차메뉴 진하게 */
#topmenu .wrap ul li a:hover{color:#000;}
#topmenu .wrap ul li.active a {color:#000;}
#topmenu .wrap div.subMenuBox{display:none;float:center;position:absolute;left:0;top:43px; height:30px;margin:0;padding:0;filter:alpha(opacity=70);opacity:0.7;background:url(./bg_sub.jpg) repeat-x 0 0;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}
#topmenu .wrap div.subMenuBox ul{margin:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul.selBoard{}
#topmenu .wrap div.subMenuBox ul li{margin:0;padding:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li {height:30px;}
#topmenu .wrap div.subMenuBox ul li.selBoard a:visited {color:black;}
#topmenu .wrap div.subMenuBox ul li a{margin:0;padding:0 12px;font:11px;letter-spacing:-1px;color:#1c8d6f;height:30px;line-height:32px;display:inline-block;}
#topmenu .wrap div.subMenuBox ul li a.over a{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li over.a{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li a:hover{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li a.active,#topmenu .wrap div.subMenuBox ul li a:active{color:black;} /* 클릭 했을때 */
#topmenu .wrap div.subMenuBox ul li.on a{text-decoration:underline;}#
css 전체 소스인데 어딜 수정해야할까요
