상단메뉴 선택후 색상에 대한 질문인데요.
본문
안녕하세요.
상단메뉴에 대한 질문입니다.
메뉴를 선택하면 그누보드 메뉴바에 색상으로 표시가 되든지
메뉴의 글씨색상에 변화를 오게 하든지 해야 하는데요.
어떻게 해주는게 좋을까요 쉽지가 않네요.
조언 부탁드립니다.
/* 메인메뉴 */
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #EBEBEB;border-bottom:1px solid #9D9D9D;background:#EBEBEB}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left}
.gnb_1da {display:inline-block;padding:5px 40px 0 20px;height:40px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #8C8C8C center right no-repeat;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#8C8C8C;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#8C8C8C;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px;width:180px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#3333;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#333;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}
감사합니다. ^^;
답변 2
참조바랍니다.
제가 직접 사용하고 있는 것 입니다.
아시겠지만,
head.php에 있는 <nav id="gnb"> ~ </nav>를 코드에 있는 '상단 메뉴 네비게이션'의 것으로 변경하시고
'상단 메인 드롭메뉴'의 css의 width가 1050px이므로 붙여 놓은 주석을 보시고 적정하게 조정하셔야 합니다.
또한, '상단 메인 드롭메뉴'의 css는 default.css에 넣어서 사용하시면 깔끔합니다.
그리고, 해당되는 head.php와 default.css의 백업은 필수 입니다.
잘 적용하시길~^^)
<!-- 상단 메뉴 네비게이션 -->
<nav id="gnb">
<h2>메인메뉴</h2>
<ul id="gnb_1dul">
<?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 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
if(strstr($row['me_link'], ".php?")) $qstr1 = "&me_code=".$row['me_code']; // link주소에 파라미터가 있는 경우
else $qstr1 = "?me_code=".$row['me_code']; // link주소에 파라미터가 없는 경우
?>
<li class="gnb_1dli <?php if($row['me_code']==substr($me_code,0,2)) echo 'active'; ?>" style="z-index:<?php echo $gnb_zindex--; ?>"> <!-- 메뉴선택 active -->
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da <?php if($row['me_name']==$group['gr_subject']) echo 'active'; ?>"><?php echo $row['me_name'] ?></a>
<?php
$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++) {
if(strstr($row2['me_link'], ".php?")) $qstr2 = "&me_code=".$row2['me_code']; // link주소에 파라미터가 있는 경우
else $qstr2 = "?me_code=".$row2['me_code']; // link주소에 파라미터가 없는 경우
if($k == 0)
echo '<ul class="gnb_2dul">'.PHP_EOL;
?>
<li class="gnb_2dli" <?php if($row['me_code']==substr($me_code,0,2)) echo 'active'; ?>" style="z-index:<?php echo $gnb_zindex--; ?>"> <!-- 메뉴선택 active -->
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da <?php if($row2['me_name']==$group['gr_subject']) echo 'active'; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if ($i == 0) { ?>
<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</nav>
<!-- 상단 메뉴 네비게이션 -->
/* 상단 메인 드롭메뉴*/
#gnb {position:relative;margin:-10px 0 0;width:100%;margin-bottom:-22px;} /* 상단 메뉴와 최상부 및 index.php 등과 간격 */
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;}
#gnb_1dul {margin:0 auto !important;padding:0;width:1050px;background:#ffffff;zoom:1;
border:solid #ffffff;border-width:1px 0px 2px 0px; border-color:#dddddd #ffffff #2c68b0 #ffffff}
#gnb_1dul a{}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_1dul .active {} /* 메뉴선택(active)시 배경색 */
#gnb_1dul .active {font-size:13px;font-weight:bold;color:royalblue !important;} /* 메뉴선택(active)시 글자색 */
#gnb_2dul .active {background:#ffffff} /* 2차 메뉴선택(active)시 배경색 */
.gnb_1dli {z-index:999;position:relative;float:left}
.gnb_1da {display:inline-block;padding:0 108px 3px 11px;height:34px;line-height:2.95em;text-decoration:none;font-size:12px;font-weight:bold}
.gnb_1da:focus, .gnb_1da:hover {text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_1da {color:#00ab33;font-weight:bold;font-size:12px;} /* 마우스 오버시 메뉴 색 */
.gnb_2dul {display:none;position:absolute;top:36px;width:180px} /* 부메뉴 폭 원래 180px 넓히면 220px*/
.gnb_2da {display:block;padding:12px 10px;text-align:left;text-decoration:none;-webkit-background-clip:padding-box;
background-clip:padding-box;border-radius: 0px;-webkit-box-shadow: 0 9px 19px rgba(0, 0, 0, .175);box-shadow: 0 9px 19px rgba(0, 0, 0, .175) !important}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#fff;color:#000;font-size:12px}
.gnb_2da:focus, .gnb_2da:hover {background:#ddd;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0px;background:#fff;} /* 부메뉴 가운데 left:-53px, 같은 라인은 0px로 */
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff;}
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:none}
아 네 감사합니다.
접기가 있었는줄 몰랐네요.
고맙습니다. ^^;
그런데 실질적으로 적용을 해보니까요 문제가 좀 있는데요
오류가 납니다.
일단 열심히 수정을 해보겠습니다.
