테스트 사이트 - 개발 중인 베타 버전입니다

부트스트랩 메뉴 만들기

· 11년 전 · 6278

부트스트랩 게시판이 생겼네요 ^^

최근 부트스트랩을 그누에 적용하여 3개 정도의 사이트를 만들었는데, 테마를 이용하니 디자인 별로 신경 안쓰고

빠른 작업이 됩니다.

 

별건 아니지만 부트스트랩 레이아웃 코드를 그누 메뉴에 붙이는 코드를 끄적여 봅니다.

(의미는 없지만 초보자분들 참고용으로 올립니다.)

[code]

  <!-- Main Header Start -->
 <!-- Header End -->
   <div class="container">
    <!-- TopNav Start -->
    <div class="topnav navbar-header">
     <a class="navbar-toggle down-button" data-toggle="collapse" data-target=".slidedown">
     <i class="fa fa-angle-down icon-current"></i>
     </a>
    </div>
    <!-- TopNav End -->
    <!-- Logo Start -->
    <div class="logo pull-left">
     <h1>
      <a href="<?php echo G5_URL; ?>/index.php">
       <img src="<?php echo G5_URL; ?>/img/logo.png" alt="로고명 입력" width="341px">
      </a>
     </h1>
    </div>
    <!-- Logo End -->
    <!-- Mobile Menu Start -->
    <div class="mobile navbar-header">
     <a class="navbar-toggle" data-toggle="collapse" href=".navbar-collapse">
     <i class="fa fa-bars fa-2x"></i>
     </a>
    </div>
    <!-- Mobile Menu End -->
    <!-- Menu Start -->
    <nav class="collapse navbar-collapse menu">
     <ul class="nav navbar-nav sf-menu">
      <?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>
       <?php /** 현재메뉴일경우 current 표기 <a id="current" href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"> **/ ?>
       <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>">
        <?php echo $row['me_name'] ?>
        <span class="sf-sub-indicator">
         <i class="fa fa-angle-down "></i>
        </span>
       </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>'.PHP_EOL;
       ?>
        <li><a href="<?php echo $row2['me_link']; ?>" class="sf-with-ul" target="_<?php echo $row2['me_target']; ?>"><?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>
    <!-- Menu End -->
   </div>
  </div>
 <!-- Main Header End -->
 </header>
 <!-- Header End --> ​

[/code]

위 코드 이전에 당연히 부트스트랩 css, js 등이 삽입되어 있어야 합니다.

작업하다보니 기본 glyphicon보다 awesome icon을 더 많이 활용하는 것 같고,

문제가 default.css와 bootstrap.css의 충돌 문제인데,, default.css 를 완전 삭제하고 싶지만

작동이 안되는 기능들이 생겨서 그냥 놔두고 사용합니다.

 

현재 그누5 전용 웹호스팅 준비중입니다, 여기에 부트스트랩 적용과 그누5에 결제를 붙이는 플젝을

같이 진행하고 있는데, 쓸만한 코드 있으면 여기에 남기도록 하겠습니다~

 

도움이 되셨길 바라며~

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

부트스트랩

부트스트랩 관련 게시판 입니다.
글쓰기
🐛 버그신고