2단 상단메뉴-도와 주세요

2단 상단메뉴-도와 주세요

QA

2단 상단메뉴-도와 주세요

본문

(원파일 위치)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에서 적용 하는게 제겐 한계가 있는것 같습니다...
고수님 도와 주세요.
=================================================================================
<?php
if(!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

/*
                                      ===============
                                      사    용    법:
                                      ===============

1. PHP 변수
===========

먼저 메뉴를 형성한다. $menus에 원하는 메뉴의 값을 넣어준다. 형식은 다음과 같다.

$menus[] = array('text'=>'menu_1', 'href=>'#', 'sub'=>array(
             array('text'=>'submenu_1', 'href'=>'#'),
             array('text'=>'submenu_2', 'href'=>'#'),
             array('text'=>'submenu_3', 'href'=>'#')
            )
   );
만일 서브 메뉴가 없다면 'sub'=>null 이렇게 잡아준다.

또한 데이터베이스에서 가져오길 원한다면 text와 href를 모두 *로 값을 준다. 다음과 같이 정한다.
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);

예)
만일 맨처음을 '홈으로' 메뉴를 만들고 그 다음에 데이터 베이스를 넣어주며
맨마지막 메뉴에는 데이터베이스에서 가져오는 것이 아니라 따로 만들기 원해서 '소식란'을 만들고
그 부메뉴로 '국내뉴스', '해외뉴스'이런식으로 한다면 다음과 같이 할 수 있다.

$menus[] = array('text'=>'홈으로', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'*', 'href'='*', 'sub'=>null);
$menus[] = array('text'=>'소식란', 'href'=>'#',
    'sub'=>array(
     array('text'=>'국내뉴스', 'href'=>'#'),
     array('text'=>'해외뉴스', 'href'=>'#')
    )
   );

이렇게 하면 메뉴가 아주 유동적으로 원하는 방식으로 그리고 데이터베이스에서 가져올 수 있다.

메뉴와 부메뉴 모두 데이터베이스에서 가져오는 경우 현재의 gr_id와 bo_table에 맞추어 메뉴와 부메뉴가 select된다.
그러나 임으로 만든 메뉴들은 선택이 되지 않는다. 그래서 얻어오는 변수가 두 종류가 있다.
$curr_menu_group과 $curr_menu_sub 이 두 변수의 값이 주어지면 select가 된다.

예를 들어 위의 '소식란'과 '해외뉴스'가 현재 페이지고 메뉴에서 활성화시키려면 다음처럼 변수에 값을 주어 넘기면
topmenu.skin.php에서 처리한다:
$curr_menu_group = '소식란';
$curr_menu_sub = '해외뉴스';


2. javascript 변수
==================

javascript변수에서 수정이 필요한 것은 네가지가 있다.

maxUlEndPos는 서브메뉴가 우측으로 너무 넘어가지 않도록 하기 위해 값을 준다.
만일 메뉴가 많은 경우 서브메뉴가 우측으로 넘어가버릴 수 있다. 그것을 방지하기 위해 서브메뉴가 위치할 부분의 너비의 최대값이
요구된다. 여기서 사용된 메뉴바의 크기가 1000이므로 940을 주었다. 직접 확인을 하면서 최대값을 주면 될 것 같다.

minLeft는 반대로 첫번째 메뉴의 서브메뉴가 좌측으로 너무 가지 않도록 하기 위한 것이다. 현재는 5 값을 주었다. 이것도 직접해보면서
정하여 최소값을 주면 된다.

IEgap은 IE에서의 화면 출력이 chrome이나 다른 브라우져에 비해 차이가 난다. 그것을 보상하기 위한 값이다. 현재 60을 주었다. 이것 역시 직접해서
확인을 해보면 될 것 같다.

마지막으로 screenGap은 메뉴바 앞쪽에 div가 있어 그 마진으로 틀어지는 경우가 있을 수 있다. 그런경우 전체적으로 차이나는 값을 주면 된다.
현재는 0값이나 특정한 경우 서브 메뉴가 전체적으로 위치가 맞지않으면 값을 주면 된다.

*/

/* 메뉴 array */
/* 메뉴 목록 중 '*'로 되어 있는 것은 데이터베이스에서
                 그룹과 게시판 이름을 가져온다는 뜻임 */

/*
이런 식으로 두 변수의 값이 넘어와야 한다.
$curr_menu_group = '나눔터';
$curr_menu_sub = '질문과 답변';
*/

$menus = array();

/*
이것은 한 예이다.

$menus[] = array('text'=>'홈으로', 'href'=>'#', 'sub'=>null);

$menus[] = array('text'=>'모임안내', 'href'=>'#',
    'sub'=>array(
     array('text'=>'교회 소개', 'href'=>'#'),
     array('text'=>'우리의 믿음', 'href'=>'#'),
     array('text'=>'모임 장소', 'href'=>'#')
    )
   );
$menus[] = array('text'=>'강단의 설교', 'href'=>'#',
    'sub'=>array(
     array('text'=>'오전 설교', 'href'=>'#'),
     array('text'=>'오후 설교', 'href'=>'#'),
     array('text'=>'수요 성경공부', 'href'=>'#')
    )
   );
$menus[] = array('text'=>'구원과 성장', 'href'=>'#',
    'sub'=>array(
     array('text'=>'구원', 'href'=>'#'),
     array('text'=>'새신자 교육', 'href'=>'#')
    )
   );
$menus[] = array('text'=>'자료실', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'나눔터', 'href'=>'#',
    'sub'=>array(
     array('text'=>'자유게시판', 'href'=>'#'),
     array('text'=>'질문과 답변', 'href'=>'#'),
     array('text'=>'사진첩', 'href'=>'#'),
     array('text'=>'지역 교회', 'href'=>'#')
    )
   );
$menus[] = array('text'=>'소식란', 'href'=>'#', 'sub'=>null);
$menus[] = array('text'=>'복음 찬송', 'href'=>'#', 'sub'=>null);
*/

/* 만일 데이터베이스에서 가져오길 원한다면 text와 href를 모두 *로 값을 주세요.
    또한 원하는 순서를 위해 위치를 바꾸셔도 됩니다. */
$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 = '';

/*

<ul>
<li><a href="#" ><div>menu_1</div></a><img src='img/top_menuline.png' alt='' />
 <ul>
 <li><a href="#" >submenu_1</a></li>
 <li><a href="#" >submenu_2</a></li>
 <li><a href="#" >submenu_3</a></li>
    </ul>
</li>
</ul>

*/

--------------------이하부분 수정 부탁 드립니다--------------------------

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>

이 질문에 댓글 쓰기 :

답변 1

글쓴님... 제가 첫 답변인데요.

이거 답변 안달려요.

좀 정리해서 올려보세요. 소스를 콕 찍어서 거기에 대해서 질문해보세요.

저렇게 긴 소스 분석해서 하려면 일인데.... 돈나오는 것도 아니고.

그렇다고 소스가 보기 쉬운것도 아니고.

추가로 플러그인까지 봐야 하는데... 답변 안달려요.

사이트 주소라도 올리고 스샷 붙여서 빨간 박스 치고 화살표로 문제지점 찍어서 다시 올리세요.

다른건 답변 달리는데 이건 안달리잖아요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,534 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT