수정
삭제
목록
 

(원파일 위치)https://sir.kr/g4_plugin/13447?sfl=wr_subject%7C%7Cwr_content&stx=%EB%A9%94%EB%89%B4&page=3

letsgolee님이 (연후하은아빠님의 CSS 메뉴를 수정했습니다) 만든 상단2단 메뉴 입니다.
제겐 이메뉴가 맘에 들고 G4에서 작동하는걸 보니 매우 유용하다고 생각이 들었으나
G5에서 적용 하는게 제겐 한계가 있는것 같습니다...
고수님 도와 주세요.

아래소스는 G4 기준으로 작성 된것입니다. 이를 G5용으로 사용 하려면 어떤 부분을 수정 해야 하는지요.

원 소스 내용중 주석 부분은 삭제 하였습니다.
 =================================================================================
 <?php
 if(!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$menus = array();

 $menus[] = array('text'=>'*', 'href'=>'*', 'sub'=>null);

?>
 <style type="text/css">
 .nav {
 height:70px;
 background: url('<?php echo $g4['path'];?>/img/top_menu_bg_1000.png') repeat-x;
 position:relative;
 width:100%;
 z-index:100;
 margin:0;
 padding:2px 0 0 0;
 }

.nav > ul.first {
 padding: 0 0 0 20px;
 }

.nav > ul {
 margin:0;
 padding:0;
 list-style:none;
 white-space:nowrap;
 float: left;
 }

.nav li {
 margin:0;
 padding:0;
 height:auto;
 float:left;
 }

.nav > ul a {
 display:block;
 float:left;
 font-weight:bold;
 padding:0 10px;
 text-decoration:none;
 line-height:20px;
 vertical-align: middle;
 white-space:nowrap;
 color:#2b3238;
 margin:5px 0 0 0;
 }

 .nav > ul a:hover,
 .nav > ul li:hover a {
 padding:0;
 cursor:pointer;
 color:#2b3238;
 padding:0 10px;
 }

.nav > ul a b{
 font-weight:bold;
 }

.nav > ul li.select div {
 text-decoration:none;
 color:#000000;
 background:#FBFBFB;
 padding:5px 8px 0 8px;
 height:26px;
 border-width:1px 1px 0 1px;
 border-color:#508ac0;
 border-style:solid;
 }

.nav > ul li div {
 text-decoration:none;
 color:#ffffff;
 padding:5px 0 0 0;
 height:27px;
 }

.nav > ul li img {
 position:relative;
 padding:10px 5px 0 5px;
 vertical-align:middle;
 border: 0;
 }

.nav ul li ul {
 list-style:none;
 display: block;
 position:absolute;
 top:36px;
 line-height:30px;
 padding:3px 0 0 25px;
 z-index:100;
 left:0;
 text-align:left;
 background: transparent;
 border: 0;
 margin-right:0;
 margin-left:0;
 }

.nav ul li ul li a {
  font-weight:normal;
 }

.nav > ul > li > a:hover div,
 .nav > ul > li:hover div {
 color: #f6ff5f;
 }

.nav ul li ul li a:hover {
 font-weight: bold;
 letter-spacing: -0.1em;
 }

.nav ul li.select ul li.select a {
 color: #E25D53;
 }
 </style>

 <script type="text/javascript">

var maxUlEndPos = 940; /* ul 엘러멘트의 맨 마지막 포지션 */
var minLeft = 0;
 var sep_icon_width = 2; /* 메뉴사이에 존재하는 이미지의 크기-top_menuline.jpg의 width */
 var IEgap = 14; /* IE와 chrome이나 다른 브라우져에 비해 차이나는 값을 적어준다. */
var screenGap = 0; /* 실제 출력시 사이드바와 같은 영향으로 밀리는 경우가 생길 수 있다.
                         그럴 때 그 차이를 적어주면 된다. */

$(document).ready(function(){

 $('.nav > ul > li').each(function(){
   var obj = $(this);

  var a = obj.find('a');
   var a_o = a.offset();
   var a_w = a.width();

  var ul = obj.find('ul');
   //var ul_o = ul.offset();
   var ul_w = ul.width();

  /* .nav의 offset을 구한다. 이것은 화면 스크린 크기가 달라도 그 크기에 맞추어 조절을 하기 위함이다. */
   var nav_o = $('.nav').offset();

  var left = a_o.left+Math.round(a_w/2)-Math.round(ul_w/2)-($.browser.msie?IEgap:0)-sep_icon_width-nav_o.left-screenGap;

  if (left < minLeft) left = minLeft;
   if (left+ul_w>maxUlEndPos) left = maxUlEndPos-ul_w;

  ul.css('left', left);
  });

 $('.nav ul li ul').hide();
  showSubmenu($('.nav ul li.select'));

  $('.nav > ul > li > a').hover(function() { //mouseover
   showSubmenu($(this).parent());
  });
 });

function showSubmenu(obj)
 {
  if (!obj) return;

 var ul = obj.find('ul');

 if (ul.is(':hidden')) $('.nav ul li ul').fadeOut('fast');//slideUp()
  //obj.find('ul').fadeIn();//slideDown()
  ul.fadeIn();
 }
 </script>

 <div class="nav">

<?php
 $text = '';
for ($i=0, $cnt=count($menus); $i<$cnt; $i++) {

 if ($menus[$i]['text']=='*' && $menus[$i]['href']=='*') {
   // 데이터베이스에서 그룹과 게시판명을 가져옴
  $sql = "select gr_id, gr_subject from $g4[group_table] where (1) order by gr_id";
   $result = sql_query($sql);
   $num_groups = mysql_num_rows($result);

  for ($k=0; $row=sql_fetch_array($result); $k++) {
    $text .= '<ul'.($i==0&&$k==0?' class="first"':'').'>'."\n";
    $text .= '<li'.($gr_id==$row['gr_id']?' class="select"':'').'><a href="'.$g4['bbs_path'].'/group.php?gr_id='.$row['gr_id'].'"><div>'.$row['gr_subject'].'</div></a><img src="'.$g4['path'].($i==$cnt-1 &&$k==$num_groups-1?'/img/top_menuline1.gif':'/img/top_menuline.png').'" alt="" />';

   $sql2 = "select bo_table, bo_subject from $g4[board_table] where gr_id='$row[gr_id]' order by bo_order_search, bo_table";
    $result2 = sql_query($sql2);
    $num_bo_tables = mysql_num_rows($result2);

   if ($num_bo_tables) {
     $text .= "\n\t<ul>\n";
     for ($j=0; $row2 = sql_fetch_array($result2); $j++) {
      $text .= "\t<li".($bo_table==$row2['bo_table']?' class="select"':'').'><a href="'.$g4['bbs_path'].'/board.php?bo_table='.$row2['bo_table'].'">'.$row2['bo_subject']."</a></li>\n";
     }
     $text .= "\t</ul>\n";
    }
    $text .= "</li>\n</ul>\n\n";
   }
  }
  else {
   $text .= '<ul'.($i==0?' class="first"':'').'>'."\n";
   $text .= '<li'.($curr_menu_group==$menus[$i]['text']?' class="select"':'').'><a href="'.$menus[$i]['href'].'"><div>'.$menus[$i]['text'].'</div></a><img src="'.$g4['path'].($i==$cnt-1?'/img/top_menuline1.gif':'/img/top_menuline.png').'" alt="" />';

  if (!is_null($menus[$i]['sub'])) {
    $text .= "\n\t<ul>\n";
    for ($j=0, $cnt_j=count($menus[$i]['sub']); $j<$cnt_j; $j++) {
     $text .= "\t<li".($curr_menu_sub==$menus[$i]['sub'][$j]['text']?' class="select"':'').'><a href="'.$menus[$i]['sub'][$j]['href'].'">'.$menus[$i]['sub'][$j]['text']."</a></li>\n";
    }
    $text .= "\t</ul>\n";
   }
   $text .= "</li>\n</ul>\n\n";
  }
 }

echo $text;
 ?>

</div>