GNU) 그누보드 사용방법. 메인메뉴구성

그누보드의 GNB(Global Navication Bar)설정은 아주 편리한 편입니다.

 

그누보드 사용자 데모를 확인해보면 상단에 메뉴들을 볼 수 있는데요.

 

기본적으로 대메뉴(쇼핑몰/SIR/스킨) 마다 소메뉴(공지사항/자유게시판/질문답변)가 나오는데.

 

 

모든 메뉴를 한 번에 펼치기 위해서는 기능(JSJQ)를 수정해야 합니다.

일단 패스하고.

 

---

메뉴설정은 그누보드 홈페이지 매뉴얼에서도 확인이 가능합니다.

 

관리자 모드 데모는 업그래이드 된 버전이기 때문에 디자인이 조금 다르기는 하지만

UI는 거의 같으므로 확인해보시면 쉽게 설정 가능합니다.

 

 

---

이렇게 설정한 메뉴들은 GNB영역 외에 다른 영역에서도 쉽게 불러와 사용이 가능합니다.

때문에 사이트맵 페이지가 따로 있는 경우 유용하게 사용이 가능합니다.

또한 대메뉴마다 aside menu를 구성할 때에도 GNB영역의 소스를 불러와 사용할 수 있습니다.

 

그런데 ....

소스파일에서 GNB영역이 어디있는지부터 찾아야겠죠?

 

그누보드의 테마를 사용하고 있다면 해당 테마의 하위 파일들을 사용중인 것인데.

모든 페이지는 메인(index)부터 시작하므로 index.php파일을 보면 쉽게 답이 나옵니다.

 

인클루드 되어있는 블럭(php블럭)을 제외한 부분은 기본메인 레이아웃입니다.

지워도 무방합니다.

 

<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_THEME_PATH.'/head.php');
?>

<!-- 기본 레이아웃 최신글 지움. -->

<?php
include_once(G5_THEME_PATH.'/tail.php');

 

그럼 메인페이지 생김새는 대강 아래와 같아지는데요.

 

 

GNB도 head영역입니다.

 

include_once(G5_THEME_PATH.'/head.php');

그리고 

include_once(G5_THEME_PATH.'/tail.php');

 

이 두 파일을 열어보면

관련 html태그들을 확인할 수 있습니다.

 

    
    <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" title="전체메뉴"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
                <?php
				$menu_datas = get_menu_db(0, true);
				$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
                $i = 0;
                foreach( $menu_datas as $row ){
                    if( empty($row) ) continue;
                    $add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
                ?>
                <li class="gnb_1dli <?php echo $add_class; ?>" 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><div class="gnb_2dul"><ul class="gnb_2dul_box">'.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></div>'.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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</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']; ?>"><?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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                    <?php } ?>
                </ul>
                <button type="button" class="gnb_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
            </div>
            <div id="gnb_all_bg"></div>
        </div>
    </nav>

 

 

 

퍼블리싱 위주로 배우거나 이제 막 프론트앤드 과정 시작하는 분들 모두

html과 php혹은 jsp와같은 블럭이 껴있으면 보기 어려워하시는데 

항상 시작과 끝을 작 확인하시면 어렵지 않습니다.

 

시작과 끝을 확인하기 어렵다면 크롬이나 기타 브라우저에서 개발자도구로 소스를 확인하거나(위 이미지)

원하는 페이지에서 우클릭 + 페이지 소스보기 혹은 view-source:https://demo.sir.kr/ 로 확인하시면

다른블럭 없이 html구조를 확인 가능합니다.

소스보기에서 php블럭은 결과물만 나오고 html블럭은 그대로 나오는 이유는

php가 서버언어이기 때문입니다.

이것은 검색해보면 더 잘 설명해놓은 글들이 많으니 검색해보시면 좋겠습니다.

 

html구조만 있는 소스와 기타 블록이 포함된 소스를 비교하면서 보시면

충분히 다룰 수 있으실겁니다.

 

 

 

 

---