안녕하세요~ 오늘은 중간 네비게이션 메뉴를 적용하는 팁을 공유 해볼까 합니다.

한번쯤은 위의 이미지와 같은 중간에 나오는 2차(서브)메뉴들을 보신적 있으시죠?

예전에 이 부분을 적용해 보고 싶어서 질문글을 올리기도 했었는데요~

자동메뉴로 상단에 출력되는 메뉴들 중에서 2차 메뉴만 따로 분리해서 중간에 적용해 보려고 하다가 포기 했었는데요 이번에 스킨을 제작 하면서 여러가지 시도를 해보고 적용이 잘 되어 공유해 봅니다.

저처럼 초보자 분들에게 도움이 되길 바랍니다.

소스코드는 아래와 같습니다.

게시판이 아닌 일반 페이지일경우 (ex : about.php)

[code]

<?php

$menu_datas = get_menu_db(0, true);

$current_url = $_SERVER['REQUEST_URI'];

$is_submenu_active = false;

foreach ($menu_datas as $row) {

    if (empty($row)) continue;

    if ($row['me_link'] === $current_url) {

        $is_submenu_active = true;

        ?>

        <?php

        foreach ((array)$row['sub'] as $row2) {

            if (empty($row2)) continue;

            ?>

            <li class="l_menu_<?php echo ($row2['me_link'] === $current_url) ? 'ON' : 'OFF'; ?>">

                <a href="<?php echo $row2['me_link']; ?>"><?php echo $row2['me_name']; ?></a>

            </li>

            <?php

        }

        break;

    }

}

if (!$is_submenu_active) {

    foreach ($menu_datas as $row) {

        if (empty($row)) continue;

        $is_submenu_active = false;

        foreach ((array)$row['sub'] as $row2) {

            if (empty($row2)) continue;

            if ($row2['me_link'] === $current_url) {

                $is_submenu_active = true;

                break;

            }

        }

        if ($is_submenu_active) {

            ?>

            <li class="l_menu_ON">

                <a href="<?php echo $row['me_link']; ?>"><?php echo $row['me_name']; ?></a>

            </li>

            <?php

            foreach ((array)$row['sub'] as $row2) {

                if (empty($row2)) continue;

                ?>

                <li class="l_menu_<?php echo ($row2['me_link'] === $current_url) ? 'ON' : 'OFF'; ?>">

                    <a href="<?php echo $row2['me_link']; ?>"><?php echo $row2['me_name']; ?></a>

                </li>

                <?php

            }

            break;

        }

    }

}

?>

[/code]

현재 페이지 의 url을 기준으로 1차메뉴 와 1차메뉴에 속한 2차메뉴를 찾아서 2차메뉴만 출력해주는 방식입니다. 또한 클릭한 2차 메뉴만 활성화 시켜줍니다.

게시판일 경우 (ex : 게시판명 -> notice )

[code]

<?php

$menus = array(

    'notice' => array(

        'title' => '공지사항',

        'bo_table' => 'notice',

    ),

    'faq' => array(

        'title' => '자주묻는 질문',

        'bo_table' => 'faq',

    ),

    'qna' => array(

        'title' => '질문/답변',

        'bo_table' => 'qna',

    ),  

);

$current_menu = isset($_GET['bo_table']) ? $_GET['bo_table'] : '';

?>

<ul id="wm_snb">

    <?php foreach ($menus as $menu_key => $menu) { ?>

        <li class="<?php echo ($current_menu == $menu['bo_table']) ? 'menu_ON' : 'menu_OFF' ?>">

            <a href="/bbs/board.php?bo_table=<?php echo $menu['bo_table'] ?>"><?php echo $menu['title'] ?></a>

        </li>

    <?php } ?>

</ul>

[/code]

게시판에서는 $board 변수를 사용하지 않고 $menus 변수를 사용했습니다. 이유는 $board 변수충돌을 막기 위함이죠~ (다들 아시는 부분이죠--;;) 처음에 이거 때문에 좀 헤매였습니다.

위의 소스를 원하시는 위치에 붙여 넣으셔도 되지만 나중에 관리하기 힘드시기 때문에 sub_menu.nav.php 이런식으로 파일을 생성 하신후 원하시는 위치에서 인클루드 하시면 편하실 겁니다.

오늘도 즐거운 하루 되세요