본문으로 바로가기

그누보드5 메뉴 현재 위치 설정

category 그누보드/GNU 팁 2017. 2. 7. 11:00

그누보드5에서 제공하는 메뉴는 현재 위치를 알리는 클래스가 설정되어 있지 않습니다. 현재 위치를 알리는 용도로 사용될 active 클래스를 추가하는 간단한 방법을 살펴봅니다.

메뉴 현재 위치 설정 원리

그누보드5에서 제공하는 메뉴에는 링크 주소를 담고 있는 $row['me_link'] 가 존재한다. 이를 현재 페이지의 주소창의 주소와 비교하여 같다면 해당 메뉴의 <li>.active 를 추가하도록 설정하는 것이 핵심이다. .active 에 대한 디자인을 스타일시트에 추가함으로써 일반 메뉴와 현재위치의 메뉴가 구분된다.

당연한 이야기겠지만, 그누보드5의 관리자 > 환경설정 > 메뉴설정 에서 추가한 메뉴들에서만 작동하며, 주소창의 주소를 다른 방식으로 변경하는 방법을 사용한다면 작동하지 않는다.

메뉴 현재 위치 설정

메뉴 현재 위치 설정 및 각각의 메뉴를 선택할 수 있는 클래스를 부여하기 위한 코드는 아래와 같다.

<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 값 설정용
    $cur_url = G5_URL.$_SERVER['REQUEST_URI'];  // #1 현재위치 설정용으로 추가

    for ($i=0; $row=sql_fetch_array($result); $i++) {
        $li_view1 = $i+1; // #2 각각의 메뉴명을 추가하기위해 설정
    ?>
    <li class="gnb_1dli <?php echo 'gnb_1dli_'.$li_view1; ?> <?php echo ($row['me_link']==$cur_url)?'active':''; ?>" >
        <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?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($k == 0)
                echo '<ul class="gnb_2dul">'.PHP_EOL;
                $li_view2 = $k+1;  // #3 각각의 서브 메뉴명을 추가하기위해 설정
        ?>
        <li class="gnb_2dli <?php echo 'gnb_2dli_'.$li_view2; ?> <?php echo ($row2['me_link']==$cur_url)?'active':''; ?>"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?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">관리자모드 > 환경설정 > 메뉴설정 에서 설정하실 수 있습니다.<?php } ?></li>
        <?php } ?>
</ul>
  • 15: 해당줄의 li 요소에 style="z-index: <?php echo $gnb_zindex--; ?>" 가 추가되어있어야 하지만 티스토리와 표기상 충돌이 일어나서 위에서는 삭제되었다. 실제론 추가되어 있어야한다.

#1 현재위치 설정용

$cur_url = G5_URL.$_SERVER['REQUEST_URI'];  // #1 현재위치 설정용으로 추가
  • G5_URL 은 그누보드5에 설정되어 있는 절대경로 상수이다. 이는 http://도메인명 과 같은 경로를 반환하게 된다.
  • $_SERVER['REQUEST_URI'] 는 현재 페이지에의 주소에서 도메인을 제외한 부분을 반환하는 상수이다. 이 상수는 파일명이나 디렉토리명만을 반환하는 다른 PHP 상수와는 다르게 변수값들도 함께 전달 받기에 게시판처럼 매개변수가 필요한 곳에 사용하기에 적당하다.

#2 메뉴명 추가를 위한 설정

$li_view1 = $i+1; // #2 각각의 메뉴명을 추가하기위해 설정
  • $row 마다 1씩 증가된 이름을 표기하기 위한 설정이다.

#3 서브 메뉴명 추가를 위한 설정

$li_view2 = $k+1;  // #3 각각의 서브 메뉴명을 추가하기위해 설정
  • 위에서 설명한 것과 같으며 이것은 서브메뉴에 표기할 메뉴명에 대한 설정이다.

메뉴명과 현재위치 클래스 추가

<li class="gnb_1dli <?php echo 'gnb_1dli_'.$li_view1; ?> <?php echo ($row['me_link']==$cur_url)?'active':''; ?>" >
  • <?php echo 'gnb_1dli_'.$li_view1; ?>class 속성값으로 삽입되며, gnb_1dli_1 을 시작으로 다음 메뉴의 클래스명은 gnb_1dli_2, .gnb_1dli_3 과 같은 형식으로 맨 뒤 숫자가 증가된 클래스명이 된다.

    • 클래스명(메뉴명)은 관리자의 메뉴설정에 추가된 순서가 기준이 아니라 메뉴설정의 순서 필드가 기준이 된다. 즉, 화면에 표시되는 실제 순서가 기준이다.
    • 서브 메뉴에 대한 메뉴명 추가도 위와 같은 형식이다.
  • <?php echo ($row['me_link']==$cur_url)?'active':''; ?> 또한, class 속성 값으로 삽입되며, 현재 페이지의 주소와 메뉴설정에서 설정된 링크 주소를 비교하여 active 를 삽입하게 된다.

    • 서브 메뉴 부분에서는 $row2['me_link'] 가 사용됨에 유의하자.
  • 결과적으로 삽입되는 첫번째 메뉴의 클래스를 살펴보면 공통의 클래스 gnb_1dli, 해당 메뉴를 선택할 수 있는 클래스 gnb_1dli_1, 현재 위치가 첫번째 메뉴의 페이지라면 클래스 active가 삽입되어 있다.

스타일시트 추가

메뉴가 삽입되는 영역에 대한 스타일시트, 대부분 default.css에 원하는 디자인을 추가하면 된다. 물론, 기존의 메뉴영역에 대한 디자인이 중복되지 않게 기존 것을 삭제하거나 수정해야 한다.

각각의 메뉴 선택 활용

가령, 각각의 메뉴의 색상을 무지개빛으로 각각 다르게 설정하고 싶다고 하자.

.gnb_1dli a {
    /* 공통의 설정 내용 */
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.gnb_1dli_1 > a {
    background-color: red;
}

.gnb_1dli_2  > a {
    background-color: orange;
}
...

메뉴 현재 위치 활용

현재 위치의 메뉴에 다른 디자인을 입혀보자.

.gnb_1dli a {
    /* 공통의 설정 내용 */
    display: block; 
    color: black;
    background-color: transparent;
}

.gnb_1dli.active > a {
    color: #fff;
    background-color: red;
}

.gnb_2dli.active > a {
    color: #fff;
    background-color: orange;
}
  • 서브 메뉴가 있다면 서브메뉴에 대한 디자인도 추가하면된다.

서브메뉴를 위한 추가사항

일반적인 메뉴바와 같은 경우 서브메뉴는 숨겨두고 1차 메뉴들만 보여지게 된다. 서브메뉴에 .active 가 적용되어 있어도 마우스 오버나 클릭과 같은 동작이 발생하지 않는한 알 수 없기에 이를 수정하고 싶을수도 있다. 간단한 방법으로는 자바스크립트를 이용해 서브메뉴의 부모 메뉴에도 .active 를 추가하는 것이다.

$(document).ready(function() {
    // 메뉴 active
    if ($('.gnb_2dli').hasClass('active')){
        var $hasActive = $('.gnb_2dli.active');
        $hasActive.parents('.gnb_1dli').addClass('active');
    };
}); 
  • 간단히 jQuery를 이용해 .active 를 가진 서브메뉴들의 부모에도 .active 를 추가했다.


'그누보드 > GNU 팁' 카테고리의 다른 글

그누보드5 작업준비  (1) 2017.11.15