본문 바로가기
그누보드

그누보드에 부트스트랩 적용 - (4)

by 똑똑한 영장류 2015. 3. 8.

상단 메뉴말고, 진짜 메뉴를 가지고 놀려고 관리자 페이지, 메뉴 설정에서 메뉴를 만들려고 보니, 페이지가 제대로 뜨지 않는다.

jquery 버전 문제인듯 싶어 최신버전으로 변경했던 jquery 버전을 다시 1.8.3 으로 돌려야했다.


head.sub.php에서...


<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>


되돌려놓고 게시판을 몇개 만들고 메뉴도 만들었다.



그룹01

-게시판01

-게시판02

그룹02

-게시판03


요렇게 만들어놓고 테스트!


원래 소스에서 메뉴를 표시해주는 부분은 head.php 에 아래 부분이다.


<nav id="gnb">

        <h2>메인메뉴</h2>

        <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 값 설정용


            for ($i=0; $row=sql_fetch_array($result); $i++) {

            ?>

            <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'] ?></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 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

                }


                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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

            <?php } ?>

        </ul>

    </nav>


gnb...

그누보드는 메뉴설정을 참고로 자동으로 드롭다운 메뉴를 만들어준다.

부트스트랩에 있는 nav 내에 드롭다운을 만드는 기능을 참고로 적용해주면 될거 같다.


아래는 부트스트랩 예제 코드다.

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>


ul 안에 li 를 class=dropdown 으로 해주고 그 아래에 주루루~ 넣어주는 형태다.


참고해서 수정한 소스는..

<nav class="navbar navbar-default">

<div class="container">


<ul class="nav navbar-nav">

<?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 값 설정용


for ($i=0; $row=sql_fetch_array($result); $i++) {

$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);

$result2_cnt = mysql_num_rows($result2);

if ($result2_cnt == 0) { ?>

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

<?php

} else { ?>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['me_name'] ?></a>

<ul class="dropdown-menu" role="menu">

<?php

for ($k=0; $row2=sql_fetch_array($result2); $k++) { ?>

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

<?php

}

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">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

<?php } ?>

</ul>


</div><!-- /.container -->


</nav><!-- /.navbar -->



흠..

jquery를 다시 2.1.3으로 변경해줘야 잘 동작을 한다.



게시판01 클릭하면 아래처럼 나오는데...그때부터 드롭다운이 동작하지 않는다.. 흑...



왜 바보가 되지???? 더 살펴봐야겠네..











댓글