메뉴 중앙정렬 관련 질문입니다
본문
반응형 웹을 쓰고있는데요
어찌저찌 해서 메인메뉴를 중앙에 뜨도록 정렬했는데 이미지처럼 close 버튼이 끝에 붙어있네요 ㅠ
left를 주면 움직이긴 하는데, 반응형인지라 화면 크기에 따라 close 버튼의 위치가 바뀌더라구요
menu 버튼이랑 같은 위치에 고정시켜서 같이 이동하게끔 하고싶은데 어딜 손보면 좋을까요??
/* 메인메뉴 */
#gnb{position:relative;}
#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap{margin:0 auto;width:100%;position:relative}
#gnb #gnb_1dul {font-size:1.3em;padding: 0;background:#25252a;zoom:1;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.3)}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli{display:inline-block; *display:inline; *zoom:1; line-height:50px;padding:0 15px;position:relative;}
#gnb .gnb_1dli:hover{background:#01a5fa;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}
#gnb_1dul {text-align:center;}
.gnb_1dli .bg{display:inline-block;width:100px;height:12px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 100% 50%;text-indent:-999px;}
.gnb_1da {display:inline-block;font-weight:bold;color:#fff;text-decoration:none;}
.gnb_2dli{border-top:1px solid #fff;}
.gnb_2dli:first-child{border:0}
.gnb_2dul {display:none;position:absolute;top:50px;min-width:100%;background:#fff;padding: 0;border-top: 1px solid #01a5fa;
-webkit-box-shadow: 0 10px 6px -6px #2d6a80;
-moz-box-shadow: 0 10px 6px -6px #2d6a80;
box-shadow: 0 10px 6px -6px #2d6a80;}
.gnb_2da {display:block;padding:0 10px;line-height:40px;color:#000;text-align:left;text-decoration:none;}
a.gnb_2da:hover{background:#01a5fa;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#fff}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;color:#fff}
.gnb_wrap .gnb_empty a{color:#fff;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a{color:#555}
#gnb .gnb_menu_btn{background:#000;color:#01a5fa;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn{background:#000;color:#01a5fa;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;}
#gnb .gnb_mnal{padding:0}
#gnb_all{display:none;position:absolute;width:100%;z-index:99;}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul{background:#fff;border:1px solid #01a5fa;padding:20px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
#gnb_all .gnb_al_li{background:#fff;float:left;min-width:14.28%;padding:5px }
#gnb_all .gnb_al_li .gnb_al_a{font-size:1.083em;padding:10px;display:block;position:relative;margin-bottom:10px;background: #fff;border-bottom: 1px solid #01a5fa;font-weight: bold;color:#000}
#gnb_all .gnb_al_li li {padding-left:10px;line-height:2em}
#gnb_all .gnb_al_li li i{color:#000}
#gnb_all .gnb_al_li li a{color:#000}
css 부분이구요
<nav id="gnb">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<ul id="gnb_1dul">
<li class="gnb_1dli gnb_mnal"><button type="button" class="gnb_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$menu_datas = array();
for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
$menu_datas[$i]['sub'][$k] = $row2;
}
}
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<span class="bg">하위분류</span><ul class="gnb_2dul">'.PHP_EOL;
?>
<li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<div id="gnb_all">
<h2>전체메뉴</h2>
<ul class="gnb_al_ul">
<?php
$i = 0;
foreach( $menu_datas as $row ){
?>
<li class="gnb_al_li">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_al_a"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><i class="fa fa-caret-right" aria-hidden="true"></i> <?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<button type="button" class="gnb_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>
</nav>
<script>
$(function(){
$(".gnb_menu_btn").click(function(){
$("#gnb_all").show();
});
$(".gnb_close_btn").click(function(){
$("#gnb_all").hide();
});
});
</script>
</div>
head.php의 메뉴부분입니다 ㅠ 도와주세요..
답변 1
위 css에는 반응형으로되는 코드는 없는것같고요 다른 css 레보시면
@media all and (max-width:767px) 이런식에 반응형의 스타일이 적용된게있을겁니다.
gnb_close_btn 이부분의 css를 찾아서 수정해보세요
close 버튼 코드로 #gnb .gnb_close_btn{background:#000;color:#01a5fa;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;} 가 있긴한데.. media로 어떤 속성을 줘야 위치가 고정되는건지 모르겠네요 크기고정하는방법밖에 몰라서 ㅠ 답변감사합니다
답변을 작성하시기 전에 로그인 해주세요.