선택된 메뉴만 다른 css 적용하는 방법 조언부탁드립니다..!
본문
선택된 메뉴만 다른 css 적용하는 방법 조언부탁드립니다..!
간단하게 서체 굵기, 색상정도만 변경하고싶습니다.
검색해서 다양한 코드를 보긴했는데, 제가 php, 자바스크립트를 잘모르다보니
변형된 head.php파일에 어떻게 적용해야할지 모르겠더라구요.
짜집기해봐도 잘안되고 ㅜㅜ
head.php 파일에서 어디를 어떻게 고쳐야할까요??
bo_subject를 사용했던 방법에서는 보드에만적용되고 다른건 제가 코드를 잘모르다보니
적용을해도 잘안되네요 ㅠㅠ 조언부탁드립니다..!
(사이트 내에서 메뉴는 .gnb_1da 로 잡힙니다. )
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<link rel="stylesheet" type="text/css" href="/theme/basic/css/fade.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="/js/simplelineicons/css/simple-line-icons.css">
<div id="popup_wrap">
<?php
if(defined('_INDEX_')) { // index에서만 실행
include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
}
?>
</div>
<!-- pc 상단 시작 { -->
<div id="hd">
<h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
<div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
<div id="tnb">
<ul>
<?php if ($is_member) { ?>
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php"><i class="fa fa-cog" aria-hidden="true"></i> 정보수정</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i> 로그아웃</a></li>
<?php if ($is_admin) { ?>
<li class="tnb_admin"><a href="<?php echo G5_ADMIN_URL ?>"><b><i class="fa fa-user-circle" aria-hidden="true"></i> 관리자</b></a></li>
<?php } ?>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL ?>/register.php"><i class="fa fa-user-plus" aria-hidden="true"></i> 회원가입</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/login.php"><b><i class="fa fa-sign-in" aria-hidden="true"></i> 로그인</b></a></li>
<?php } ?>
</ul>
</div>
<div id="hd_wrapper">
<div id="logo">
<a href="<?php echo G5_URL ?>">
<img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>">
</a>
</div>
<div class="hd_sch_wr">
<fieldset id="hd_sch" >
<legend>사이트 내 전체검색</legend>
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only">검색어 필수</label>
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어를 입력해주세요">
<button type="submit" id="sch_submit" value="검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
</form>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}
// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
</fieldset>
<?php echo popular('theme/basic'); // 인기검색어, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
</div>
<ul id="hd_qnb">
<li><a href="<?php echo G5_BBS_URL ?>/faq.php"><i class="fa fa-question" aria-hidden="true"></i><span>FAQ</span></a></li>
<li><a href="<?php echo G5_BBS_URL ?>/qalist.php"><i class="fa fa-comments" aria-hidden="true"></i><span>1:1문의</span></a></li>
<li><a href="<?php echo G5_BBS_URL ?>/current_connect.php" class="visit"><i class="fa fa-users" aria-hidden="true"></i><span>접속자</span><strong class="visit-num"><?php echo connect('theme/basic'); // 현재 접속자수, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?></strong></a></li>
<li><a href="<?php echo G5_BBS_URL ?>/new.php"><i class="fa fa-history" aria-hidden="true"></i><span>새글</span></a></li>
</ul>
<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'] ?><!--<img src="<?=G5_IMG_URL?>/menu_<?php echo $i ?>.png" />--></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>
<div id="gnb_icon">
<ul>
<li><a href="https://blog.naver.com/designspace801" target="_blank"><img src="<?php echo G5_IMG_URL ?>/blog_ico.png"></a></li>
<li><a href="https://www.instagram.com/designspace801" target="_blank"><img src="<?php echo G5_IMG_URL ?>/insta_ico.png"></a></li>
</ul>
</div>
</div>
<script>
$(function(){
$(".gnb_menu_btn").click(function(){
$("#gnb_all").show();
});
$(".gnb_close_btn").click(function(){
$("#gnb_all").hide();
});
});
</script>
</div>
<!-- } pc 상단 끝 -->
<!-- 모바일 상단 시작 { -->
<header id="m_hd">
<h1 id="m_hd_h1"><?php echo $g5['title'] ?></h1>
<div id="m_hd_wrapper">
<div id="tnb">
<ul>
<?php if ($is_member) { ?>
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>
/register_form.php"><i class="fa fa-cog" aria-hidden="true"></i> 정보수정</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i> 로그아웃</a></li>
<?php if ($is_admin) { ?>
<li class="tnb_admin"><a href="<?php echo G5_ADMIN_URL ?>"><b><i class="fa fa-user-circle" aria-hidden="true"></i> 관리자</b></a></li>
<?php } ?>
<?php } else { ?>
<!--<li><a href="<?php echo G5_BBS_URL ?>/register.php"><i class="fa fa-user-plus" aria-hidden="true"></i> 회원가입</a></li>-->
<li><a href="<?php echo G5_BBS_URL ?>/login.php"><b><i class="fa fa-sign-in" aria-hidden="true"></i> 로그인</b></a></li>
<?php } ?>
</ul>
</div>
<div id="m_logo">
<a href="<?php echo G5_URL ?>/index.php">
<img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>">
</a>
</div>
<button type="button" id="m_gnb_open" class="m_hd_opener"><img src="<?php echo G5_IMG_URL ?>/m_menubar.png" alt="m_menubar"><span class="sound_only"> 메뉴열기</span></button>
<div id="m_gnb" class="m_hd_div">
<ul id="m_gnb_1dul">
<?php
$sql = " select *
from {$g5['menu_table']}
where me_mobile_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
for($i=0; $row=sql_fetch_array($result); $i++) {
?>
<li class="m_gnb_1dli">
<a href="<?php echo $row['me_link']; ?>" class="m_gnb_1da"><?php echo $row['me_name'] ?>
</a>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_mobile_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($k == 0)
echo '<button type="button" class="btn_m_gnb_op">▼</button>
<ul class="m_gnb_2dul">
'.PHP_EOL; ?>
<li class="m_gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" class="m_gnb_2da"><span></span><?php echo $row2['me_name'] ?>
</a></li>
<?php }
if($k > 0) echo '
</ul>
'.PHP_EOL; ?> </li>
<?php }
if ($i == 0) { ?>
<li id="m_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" id="m_gnb_close" class="m_hd_closer"><span class="sound_only">메뉴 </span>닫기</button>
</div>
<div class="m_hd_div" id="user_menu">
<button type="button" id="user_close" class="m_hd_closer"><span class="sound_only">메뉴 </span>닫기</button>
<?php echo outlogin('theme/basic'); // 외부 로그인 ?>
<ul id="m_hd_nb">
<li class="m_hd_nb1"><a href="<?php echo G5_BBS_URL ?>/qalist.php" id="snb_qa"><i class="fa fa-comments" aria-hidden="true"></i><br>
1:1문의</a></li>
<li class="m_hd_nb2"><a href="<?php echo G5_BBS_URL ?>/faq.php" id="snb_faq"><i class="fa fa-question-circle" aria-hidden="true"></i><br>
FAQ</a></li>
<li class="m_hd_nb3"><a href="<?php echo G5_BBS_URL ?>/current_connect.php" id="snb_cnt"><i class="fa fa-users" aria-hidden="true"></i><br>
접속자 <span><?php echo connect('theme/basic'); // 현재 접속자수 ?>
</span></a></li>
<li class="m_hd_nb4"><a href="<?php echo G5_BBS_URL ?>/new.php" id="snb_new"><i class="fa fa-history" aria-hidden="true"></i><br>
새글</a></li>
</ul>
<div id="text_size">
<!-- font_resize('엘리먼트id', '제거할 class', '추가할 class'); -->
<button id="size_down" onclick="font_resize('container', 'ts_up ts_up2', '', this);" class="select"><img src="<?php echo G5_URL; ?>/img/ts01.png" width="20" alt="기본"></button>
<button id="size_def" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up', this);"><img src="<?php echo G5_URL; ?>/img/ts02.png" width="20" alt="크게"></button>
<button id="size_up" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up2', this);"><img src="<?php echo G5_URL; ?>/img/ts03.png" width="20" alt="더크게"></button>
</div>
</div>
<script>
$(function () {
//폰트 크기 조정 위치 지정
var font_resize_class = get_cookie("ck_font_resize_add_class");
if( font_resize_class == 'ts_up' ){
$("#text_size button").removeClass("select");
$("#size_def").addClass("select");
} else if (font_resize_class == 'ts_up2') {
$("#text_size button").removeClass("select");
$("#size_up").addClass("select");
}
$(".m_hd_opener").on("click", function() {
var $this = $(this);
var $m_hd_layer = $this.next(".m_hd_div");
if( $m_hd_layer.is(":visible") ){
$m_hd_layer.slideUp();
}else{
$m_hd_layer.slideDown();
}
});
$("#container").on("click", function() {
$(".m_hd_div").hide();
});
$(".btn_m_gnb_op").click(function(){
$(this).toggleClass("btn_m_gnb_cl").next(".m_gnb_2dul").slideToggle(300);
});
$(".m_gnb_1da").click(function(){
$(this).next(".btn_m_gnb_op").trigger("click");
});
$(".m_hd_closer").on("click", function() {
var idx = $(".m_hd_closer").index($(this));
$(".m_hd_div:visible").hide();
$(".m_hd_opener:eq("+idx+")").find("span").text("열기");
});
});
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 1300
});
</script>
</div>
</header>
<!-- } 모바일 상단 끝 -->
<!-- 콘텐츠 시작 { -->
<div id="wrapper">
<div id="container_wr">
<div id="container">
<?php if (!defined("_INDEX_")) { ?>
<div class="sub_topImg"><img src="<?php echo G5_IMG_URL ?>/sub_topImg.png" alt="img"/></div>
<div id="container_title">
<p title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></p>
<?php $row = sql_fetch("select * from {$g5['member_table']} where mb_level = 9;"); ?>
<span><?php echo $row['mb_nick'] ?></span>
</div>
<?php } ?>
답변 4
탑의 메뉴는 <h2>메인메뉴</h2> 이부분이 메뉴 이며
css 폴더안에
default.css 파일을 열어서 메인메뉴 검색하면 css 정의 가 되어있습니다.
서체 굵기, 색상정도만 변경하고싶다고 하셨는데.
그렇다면
default.css 파일에서 .gnb_1da 검색하여,
color:#080808; 원하는 폰트 색상 과 font-weight: bold; 굵기 요소를 원하는 값을 변경해주시면됩니다.
.gnb_1da {display:block; font-weight:bold; padding:0 15px; color:#080808; text-decoration:none; }
<style>
.gnb_1da {
display:block; margin:0 auto;
<?php
if ($board['bo_table'] == "free") {
echo "width:100%; height:100%;";
} else if ($board['bo_table'] == "gallery") {
echo "width:50%; height:50%";
} else {
echo "width:30%; height:30%";
}
?>
}
</style>
display:block; margin: 0 auto; 는 공통이고 나머지는 게시판별 달리 주는 것입니다.
다음과 같은 방법도 있으니 참고해서 원하시는 형태로 구현하시면 될 것 같습니다.
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
// 서브메뉴 컬러 추가부분 [s]
if ($row2['me_code'] == '2020' || $row2['me_code'] == '3020' || $row2['me_code'] == '5020' ) {
$menu_color = 'style="color:#ed6a4a!important;font-family:notokr-medium"';
} else {
$menu_color = '';
}
// 서브 메뉴컬러 추가부분 [e]
if($k == 0)
echo '<ul class="top_nav_depth">'.PHP_EOL;
?>
답변주셔서 정말 감사드립니다!
답변주신 내용들과 같이 짜집기해서 아래와 같이 해결했습니다.
다만, co_id 페이지말고 자체적으로 만든 sub폴더안의 php페이지도 연결하려했는데 그건 아직 해결못했습니다.
참고용으로 코드올려요~! (게시판 (bo_table)과, 내용관리페이지(co_id) 만 반영됩니다.
head.php 부분 반영
추가되는 부분 :
<?php // 게시판과 내용관리 페이지를 메뉴로 설정할 시, $txt로 저장
if ($board) { // 게시판을 메뉴로 설정할 시 $로 저장
$txt = $board['bo_subject'];
} elseif ($co) { //내용관리 페이지를 메뉴로 설정할 시 $txt로 저장
$txt = $co['co_subject'];
} else {
// 어떤 조건도 충족되지 않을 때 기본값 설정
$txt = "기본값";
} // 단, 제목 co_subject, bo_subject와 menu_list의 메뉴명이 반드시 동일해야함
?>
변경되는 부분 (gnb_1da) :
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>"><?php if ($txt == $row['me_name']) { ?>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da" style="color:#000 !important"><?php echo $row['me_name'] ?></a>
<?php } else { ?>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<?php } ?>
다음과 같은 방법으로 해결 할 수 있지 않을까 합니다.
참고하셔서 원하시는 형식으로 구현해 보세요
<?php
// 현재 페이지의 경로를 가져옵니다.
$current_url = $_SERVER['REQUEST_URI'];
// 게시판과 내용 관리 페이지를 메뉴로 설정할 시, $txt로 저장
if ($board) {
$txt = $board['bo_subject'];
} elseif ($co) {
$txt = $co['co_subject'];
} else {
$txt = "기본값";
}
// 단, 제목 co_subject, bo_subject와 menu_list의 메뉴명이 반드시 동일해야 함
?>
<!-- 메뉴 항목을 출력할 루프 -->
<?php foreach ($menu_list as $row) { ?>
<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 ($current_url == $row['me_link']) ? ' active' : ''; ?>">
<?php echo $row['me_name'] ?>
</a>
</li>
<?php } ?>
현재 페이지의 경로($current_url)를 가져와서 각 메뉴 항목의 링크($row['me_link'])와 비교하여 현재 페이지와 메뉴 항목의 링크가 일치하면 active 클래스를 적용하여 일반페이지(즉 test.php)에도 색상을 변경할 수 있을 것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.