first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,235 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout_hd/'.$rb_core['layout_hd'].'/style.css?ver='.G5_TIME_YMDHIS.'">', 0);
|
||||
// 💡 [핵심] 메인 페이지에서는 투명하게 시작하고, 스크롤하면 배경색이 나타나도록 클래스를 동적으로 설정합니다.
|
||||
$header_class = '';
|
||||
if (defined('_INDEX_') && !empty($rb_builder['bu_trans_header'])) {
|
||||
$header_class = 'is-transparent';
|
||||
} else {
|
||||
$header_class = 'is-scrolled';
|
||||
}
|
||||
|
||||
// 💡 [핵심] PC와 모바일에서 공통으로 사용할 메뉴 데이터를 한 번만 불러옵니다.
|
||||
$menu_tree = get_menu_db(0, false); // PC용 메뉴(0), 캐시 사용(true)
|
||||
$menu_tree_mobile = get_menu_db(1, false); // 모바일용 메뉴(1), 캐시 사용(true)
|
||||
|
||||
?>
|
||||
|
||||
<!-- 📌 [전체 수정] 관리자 메뉴와 100% 연동되는 최종 헤더 -->
|
||||
|
||||
<header id="header" class="main-header <?php echo $header_class; ?>">
|
||||
<div class="header-inner container">
|
||||
|
||||
<!-- 1. 좌측: 로고 -->
|
||||
<div class="header-left">
|
||||
<a href="<?php echo G5_URL ?>" class="header-logo" aria-label="메인으로 이동">
|
||||
<picture>
|
||||
<?php if (!empty($rb_builder['bu_logo_mo'])) { ?>
|
||||
<source srcset="<?php echo G5_URL ?>/data/logos/mo?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } else { ?>
|
||||
<source srcset="<?php echo G5_THEME_URL ?>/rb.img/logos/mo.png?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } ?>
|
||||
|
||||
<?php if (!empty($rb_builder['bu_logo_pc'])) { ?>
|
||||
<img src="<?php echo G5_URL ?>/data/logos/pc?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>">
|
||||
<?php } else { ?>
|
||||
<img src="<?php echo G5_THEME_URL ?>/rb.img/logos/pc.png?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>">
|
||||
<?php } ?>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2. 중앙: 메인 내비게이션 (PC) -->
|
||||
<nav class="gnb pc-only">
|
||||
<ul class="gnb-list">
|
||||
<?php
|
||||
foreach ($menu_tree as $row) {
|
||||
$has_sub = isset($row['sub']) && !empty($row['sub']);
|
||||
echo '<li class="gnb-item' . ($has_sub ? ' has-submenu' : '') . '">';
|
||||
$href = $row['me_link'];
|
||||
if (strpos($href, '#') === 0 && strlen($href) > 1) {
|
||||
$href = G5_URL . $href;
|
||||
}
|
||||
echo '<a href="' . $href . '" target="_' . $row['me_target'] . '" class="gnb-link">' . get_text($row['me_name']) . '</a>';
|
||||
if ($has_sub) {
|
||||
echo '<ul class="sub-menu">';
|
||||
foreach ($row['sub'] as $row2) {
|
||||
$href2 = $row2['me_link'];
|
||||
if (strpos($href2, '#') === 0 && strlen($href2) > 1) {
|
||||
$href2 = G5_URL . $href2;
|
||||
}
|
||||
echo '<li><a href="' . $href2 . '" target="_' . $row2['me_target'] . '">' . get_text($row2['me_name']) . '</a></li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
}
|
||||
echo '</li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 3. 우측: 유틸리티 메뉴 -->
|
||||
<div class="header-right">
|
||||
<ul class="utility-nav">
|
||||
<li class="pc-only">
|
||||
<button type="button" class="search-toggle-btn" aria-label="검색창 열기"><i class="fa fa-search" aria-hidden="true"></i></button>
|
||||
</li>
|
||||
<?php if ($is_member) { ?>
|
||||
<li class="user-menu-container">
|
||||
<button type="button" class="user-menu-btn" aria-label="사용자 메뉴 열기"><i class="fa fa-user-circle" aria-hidden="true"></i></button>
|
||||
<div class="user-menu-dropdown">
|
||||
<div class="user-info">
|
||||
<strong><?php echo $member['mb_nick'] ?></strong> 님
|
||||
<a href="<?php echo G5_BBS_URL; ?>/point.php" target="_blank" class="win_point user-points"><?php echo number_format($member['mb_point']); ?> P</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/memo.php" class="win_memo">쪽지 <?php if ($memo_not_read > 0) echo '<span class="new-badge">' . $memo_not_read . '</span>'; ?></a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/scrap.php" class="win_scrap">스크랩</a></li>
|
||||
<li><a href="<?php echo G5_URL; ?>/rb/home.php?mb_id=<?php echo $member['mb_id']; ?>">마이페이지</a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php } else { ?>
|
||||
<li class="pc-only"><a href="<?php echo G5_BBS_URL ?>/login.php?url=<?php echo urlencode(G5_URL); ?>">로그인</a></li>
|
||||
<li class="pc-only"><a href="<?php echo G5_BBS_URL ?>/register.php" class="btn-join">회원가입</a></li>
|
||||
<?php } ?>
|
||||
<li class="mobile-only">
|
||||
<button type="button" id="mobile-menu-toggle" class="mobile-menu-btn" aria-label="전체메뉴 열기"><i class="fa fa-bars" aria-hidden="true"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-bar-wrap">
|
||||
<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">
|
||||
<input type="text" name="stx" id="search-bar-input" placeholder="검색어를 입력하세요" maxlength="20">
|
||||
<button type="submit" class="search-bar-submit"><i class="fa fa-search" aria-hidden="true"></i></button>
|
||||
<button type="button" class="search-bar-close">×</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="mobile-nav-overlay"></div>
|
||||
<div id="mobile-nav-panel">
|
||||
<div class="mobile-nav-header">
|
||||
<?php if (!$is_member) { ?>
|
||||
<a href="<?php echo G5_BBS_URL ?>/login.php" class="btn-mobile-login">로그인</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/register.php" class="btn-mobile-join">회원가입</a>
|
||||
<?php } else { ?>
|
||||
<div class="mobile-user-info">
|
||||
<strong><?php echo $member['mb_nick'] ?></strong> 님, 환영합니다.
|
||||
</div>
|
||||
<?php } ?>
|
||||
<button type="button" id="mobile-menu-close" class="mobile-menu-close-btn" aria-label="전체메뉴 닫기">×</button>
|
||||
</div>
|
||||
<nav class="mobile-gnb">
|
||||
<ul>
|
||||
<?php
|
||||
foreach ($menu_tree_mobile as $row) {
|
||||
$has_sub = isset($row['sub']) && !empty($row['sub']);
|
||||
?>
|
||||
<li>
|
||||
<?php
|
||||
$href = $row['me_link'];
|
||||
if (strpos($href, '#') === 0 && strlen($href) > 1) {
|
||||
$href = G5_URL . $href;
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo $href; ?>" target="_<?php echo $row['me_target']; ?>">
|
||||
<?php echo get_text($row['me_name']); ?>
|
||||
<?php if ($has_sub) echo '<span class="sub-menu-indicator"><i class="fa fa-chevron-down"></i></span>'; ?>
|
||||
</a>
|
||||
<?php
|
||||
if ($has_sub) {
|
||||
echo '<ul class="sub-menu">';
|
||||
foreach ($row['sub'] as $row2) {
|
||||
$href2 = $row2['me_link'];
|
||||
if (strpos($href2, '#') === 0 && strlen($href2) > 1) {
|
||||
$href2 = G5_URL . $href2;
|
||||
}
|
||||
echo '<li><a href="' . $href2 . '" target="_' . $row2['me_target'] . '">' . get_text($row2['me_name']) . '</a></li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// PC/모바일 공통: 헤더 스크롤 효과
|
||||
const header = document.getElementById('header');
|
||||
if (header.classList.contains('is-transparent')) {
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 50) {
|
||||
header.classList.add('is-scrolled');
|
||||
} else {
|
||||
header.classList.remove('is-scrolled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// PC 전용: 검색창 토글
|
||||
const searchToggleBtn = document.querySelector('.search-toggle-btn');
|
||||
const searchBarWrap = document.getElementById('search-bar-wrap');
|
||||
const searchBarClose = document.querySelector('.search-bar-close');
|
||||
|
||||
if (searchToggleBtn && searchBarWrap) {
|
||||
searchToggleBtn.addEventListener('click', function() {
|
||||
searchBarWrap.classList.add('is-active');
|
||||
document.getElementById('search-bar-input').focus();
|
||||
});
|
||||
}
|
||||
if (searchBarClose && searchBarWrap) {
|
||||
searchBarClose.addEventListener('click', function() {
|
||||
searchBarWrap.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// 모바일 전용: 메뉴 패널 토글
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-toggle');
|
||||
const mobileMenuCloseBtn = document.getElementById('mobile-menu-close');
|
||||
const navPanel = document.getElementById('mobile-nav-panel');
|
||||
const overlay = document.getElementById('mobile-nav-overlay');
|
||||
const body = document.body;
|
||||
|
||||
function openMenu() {
|
||||
if (navPanel) navPanel.classList.add('is-active');
|
||||
if (overlay) overlay.classList.add('is-active');
|
||||
body.style.overflow = 'hidden'; // 스크롤 방지
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
if (navPanel) navPanel.classList.remove('is-active');
|
||||
if (overlay) overlay.classList.remove('is-active');
|
||||
body.style.overflow = ''; // 스크롤 복원
|
||||
}
|
||||
|
||||
if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMenu);
|
||||
if (mobileMenuCloseBtn) mobileMenuCloseBtn.addEventListener('click', closeMenu);
|
||||
if (overlay) overlay.addEventListener('click', closeMenu);
|
||||
|
||||
// 모바일 전용: 서브메뉴 토글
|
||||
const subMenuIndicators = document.querySelectorAll('.mobile-gnb .sub-menu-indicator');
|
||||
subMenuIndicators.forEach(indicator => {
|
||||
indicator.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const subMenu = this.closest('li').querySelector('.sub-menu');
|
||||
if (subMenu) {
|
||||
const isVisible = subMenu.style.display === 'block';
|
||||
subMenu.style.display = isVisible ? 'none' : 'block';
|
||||
this.querySelector('i').classList.toggle('fa-chevron-up', !isVisible);
|
||||
this.querySelector('i').classList.toggle('fa-chevron-down', isVisible);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,57 @@
|
||||
/* 레이아웃 CSS */
|
||||
.rows_gnb_wrap {border-top:1px solid rgba(255,255,255,0.2); padding-top: 10px; margin-top: 20px;}
|
||||
.row_gnbs {position: relative;}
|
||||
.row_gnbs .cbp-hrmenu > ul, .cbp-hrmenu .cbp-hrsub-inner {padding-left: 0px; padding-right: 0px;}
|
||||
.row_gnbs .cbp-hrmenu > ul > li {padding-left: 0px; padding-right: 30px;}
|
||||
.row_gnbs .cbp-hrmenu > ul {float:none !important; line-height: 100%;}
|
||||
.gnb_wrap .row_gnbs nav {float:none;}
|
||||
.row_gnbs .cbp-hrmenu .cbp-hrsub {top:40px;}
|
||||
|
||||
.search_top_wrap {float:left; position: relative; width: 280px;}
|
||||
.search_top_wrap input {border:0px; background-color: #fff; border-radius: 60px; height:40px; width: 100%; color:#000;}
|
||||
.search_top_wrap input::placeholder{font-family:'font-R',sans-serif; color:#999;}
|
||||
.search_top_wrap button {position: absolute; top:11px; right:15px;}
|
||||
.search_top_wrap input:focus {border:0px !important;}
|
||||
.search_top_wrap_inner {position: relative;}
|
||||
|
||||
/* 게시판 fixed 버튼 위치조정 */
|
||||
.rb_bbs_wrap .btns_gr_wrap {top:185px !important;}
|
||||
|
||||
.co_header0 .rows_gnb_wrap {border-top:1px solid rgba(0,0,0,0.05);}
|
||||
.co_header0 .search_top_wrap input {background-color: rgba(0,0,0,0.05);}
|
||||
.ser_display_none .search_top_wrap_inner {display: none;}
|
||||
.header-logo img { height: 65px; }
|
||||
.header-inner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: unset; !important;
|
||||
width: 100%;
|
||||
}
|
||||
.header-left{
|
||||
display: flex;
|
||||
align-items: unset; !important;
|
||||
flex-shrink: 0;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width:1024px) {
|
||||
.rows_gnb_wrap {display: none;}
|
||||
.search_top_wrap {width: 30%;}
|
||||
.gnb_wrap .snb_wrap .qm_wrap a {width: auto; padding-left: 0px; margin-left: 20px;}
|
||||
.gnb_wrap .tog_wrap {margin-right: 20px;}
|
||||
|
||||
/* 1.0.1 { */
|
||||
.mobile_cb {clear: both;}
|
||||
.search_top_wrap {display: block; float:none !important; width: 100%; margin-top: 10px;}
|
||||
.gnb_wrap .snb_wrap .my_btn_wrap {display: block;margin-left: 20px;}
|
||||
.gnb_wrap .snb_wrap .my_btn_wrap .btn_round.arr_bg {display: none;}
|
||||
.gnb_wrap .snb_wrap .my_btn_wrap .btn_round {padding-left: 15px; padding-right: 15px; height:35px;}
|
||||
.gnb_wrap .snb_wrap .qm_wrap a span {left: 10px;}
|
||||
/* } */
|
||||
|
||||
/* 1.1.1 { */
|
||||
.gnb_wrap .inner {padding-left: 0px !important; padding-right: 0px !important;}
|
||||
/* } */
|
||||
.header-logo img { height: 30px; }
|
||||
}
|
||||
Reference in New Issue
Block a user