간략하게 <div><ul><li>태그로 구현한 그룹가로+게시판세로형 자동메뉴 > 그누4 스킨

그누4 스킨

스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.

간략하게 <div><ul><li>태그로 구현한 그룹가로+게시판세로형 자동메뉴 정보

기타 간략하게 <div><ul><li>태그로 구현한 그룹가로+게시판세로형 자동메뉴

첨부파일

gbRFH.zip (1.8K) 404회 다운로드 2006-09-17 23:51:50

본문

통합라이브러리를 사용하는 그룹+게시판 Unordered List(UL) 형태의 매뉴입니다.

    코드라인을 마구마구 줄여봅니다.
    해당 그룹, 해당 게시판 위치표시 부분을 더욱 간략하게 코딩해보았습니다.
    제어된 그룹 및 게시판 목록을 <div><ul><li>태그로 최대한 간결하게 추출해봅니다.
    CSS 부분을 유의해서 보시면 여러가지 응용이 가능한 형태입니다.
    자바스크립트는 msie 에서 서브 메뉴를 동작시키는데 필요합니다.
    쌀나라에서 잘~ 나가는 모 사이트에서 업어온 태그와 스크립트를 응용했음을 고백합니다.^^
    미리보기 링크1 상단..
 
그룹, 게시판, 분류 확장 메뉴 라이브러리(gbcRF_menu.lib.php) 연동
http://gnusr.com/g4/bbs/tb.php/work/242

호출방법 <?=gbcRF_menu("gbRFH", "");?>
전체 그룹에서 추출하는 경우 그룹아이디 부분은 비워두시면 됩니다.

gbRFH - 메뉴스킨 폴더 skin/menu/에 업로드
처음 테스트 하시는 분은 gbcRF_menu.lib.php 통합 라이브러리 파일을 g4/extend/에 업로드후 테스트 하십시오.
/////////////////////////////////////////
추가 수정사항;
#navblock {float:left;margin-top:12px;} ==> #navblock {float:left;margin:0px;}로 수정
margin-top값을 여기서 지정시 포인터 영역 밀리는 문제를 나스카님께서 지적해주셨습니다.
만약 톱마진이 필요하다면 상위 #navwrap 블력에서 설정하시기 바랍니다.

<?
if (!defined('_GNUBOARD_')) exit;//gbRFH skin
/////////////////////////////////////////////////////////////////////////////
//그룹, 게시판, 분류 확장 메뉴 라이브러리(gbcRF_menu.lib.php) 연동
//호출방법 gbcRF_menu("스킨디렉토리", "그룹아이디");
//그룹아이디 비워두면 전체그룹 에서 추출
//제어된 그룹 및 게시판 목록을 Unordered List 형태로 추출

?><script type="text/javascript">
/* Extra stuff to enable nav hovers in IE/Win */
sfHover = function() {
  var sfEls = document.getElementById("nav").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
  }
}

if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<style type="text/css">
/* Main Nav
-------------------------------------- */
#navwrap {background:transparent;width:800px;height:32px;padding:0;position:absolute;left:20px;z-index:100;}
#navblock {float:left;margin:0px;}
#nav, #nav ul {line-height:1.4em;padding:0;margin:0;list-style-type:none;background:#fff;display:block;font-family:'Lucida Grande', 'Lucida Sans Unicode', '굴림', 'verdana', 'sans-serif';}
#nav a {display:block;border-bottom:none;color:#333;}
#nav a:hover {color:#333;border-bottom:none;}
#nav li {position:relative;float:left;margin:0 15px 0 0;padding:0;width:auto;height:20px;background:none;}
#nav li:hover ul, #nav li.sfhover ul {left:auto;}
/* second-level lists */
#nav li ul { position:absolute;left:-999em;top:20px;width:146px;height:auto; margin:0 0 0 -8px;padding:0;background:#F8F8F6;display:block;list-style-type:none; border:1px solid #909090;}
#nav li li {height:auto;margin:0;padding:0;width:100%;font-size:12px;border-bottom:1px solid #E5E5E1;}
#nav li li span {margin:0;padding:3px 4px 3px 7px;display:block;position:relative;}
#nav li li a, #nav li li a:visited {text-decoration:none;display:block;}
#nav li li a:hover {text-decoration:none;display:block;color: #fff;background-color:#909090;}

*>html #navblock ul {f\loat: right;margin-top:11px;} /*IE 5 Mac hack  */
*>html #nav a {f\loat: left;} /*IE 5 Mac hack */
/* pos
-------------------------------------- */
.groupPos {font-weight:bold;color:darkblue;}
.boardPos {font-weight:normal; color:red;}
</style>

<div id="navwrap">

  <div id="navblock">

  <ul id="nav"><?
  /*logic Unordered List/
  <ul>
  foreach( $list as $group){
    $menuSize= count( $list);
    $bbsSize= count( $group['bbs']);

    echo "<li>" . $group['gr_subject'] . "<ul>";
   
      foreach( $group['bbs'] as $bbs){
          echo "<li>" . $bbs['bo_subject'] . "</li>";
      }
    </ul></li>
  }
  </ul>
  /*/

  //그룹
  foreach( $list as $group){
    //$menuSize= count( $list);
    $bbsSize= count( $group['bbs']);

    $groupSubject = ($group['gr_id'] == $gur)?"<span class='groupPos'>":"<span style='font-weight:bold;'>";
    $groupSubject .= cut_str(get_text($group['gr_subject']),20,"") . "</span>";

    ?><li><a href="<?=$g4['path']?><?=$group['gr_id'] == "sample_gal"?'/gallery':'';/*특정그룹 경로*/?>/?gur=<?=$group['gr_id']?>" title=""><?=$groupSubject?></a>
    <ul><?

    //게시판
    foreach( $group['bbs'] as $bbs){

      $boardSubject = ($bbs['bo_table'] == $bo_table)?"<span class='boardPos'>":"<span>";
      $boardSubject .= cut_str(get_text($bbs['bo_subject']),20,"…") . "</span>";
      ?><li><a href="<?=$g4['bbs_path']?>/board.php?bo_table=<?=$bbs['bo_table']?>" onfocus='this.blur()'><?=$boardSubject?></a></li><?

    }//bbs
    ?></ul>
    </li><?
  }//group
  ?></ul>
  </div>
</div>
추천
12

댓글 전체

수고하셨습니다...

링크1의 경우 로그인 폼 뒤로 레이어가 숨바꼭질을 합니다......

(파이어폭스는 괜챦습니다만 익스플로러에서만 그러한 듯 합니다.)
헐랭이님 감사합니다.
휴일 편안하게 보내셨는지요?

저는 평일보다 더바쁜 하루였습니다.
일 끝마치고 손가락 정리운동 차원에서 pga 소스를 살짝 응용해보았습니다.
손끝이 아려서 타이핑이 어색합니다.^^;;
..... 맨정신이라 그런지 내용도 어색하군요.~~**
아참 지금도 숨바꼭질하는지요??
지금은 정상으로 출력이 되고 있습니다.

휴일을 정신없이 보냈습니다.^^
이곳 남쪽에는 산산이가 비바람을 몰고와서 난장판을 만들고 있답니다.
와 입이 안다물어지네요^^ 정말 sir 메뉴의 달인이라 칭송받아 마땅하신듯 합니다~! 추천을 정말 하고프나, 저한테는 추천자격이 없나보네요 버튼이 안보이네 ㅠㅠ
세분 코멘트 감사합니다.^^

간략하게 <ul><li>태그를 활용한 케이스 하나 추가된 정도로 봐주시면 좋겠습니다.

  테스트 결과 기본적인 html 코드를 사용하는 만큼 서브메뉴 위치 제어에서 브라우저 특성을 타지 않는점이 좋군요.
  스타일에서 list-style-type 속성과, msie를 위한 별도의 스크립트등은 저도 처음 접한 부분입니다.
  개인적 지향점과 맞다은 '표준을 지키면서 알기쉬운 코드'로 구현된 예가 있어 적용해 본것입니다.
브라우져의 특성을 타지 않는 부분에 후한 점수를 드려 봅니다....

오늘도 프로그램 작업하다 익스와 불여우의 차이점을 가지고 한시간 이상을 헤메어 보았기에.......ㅠ.ㅠ

일단 추천과 함께 스크랩 합니다....

감사합니다...^^


1. 브라우저마다 메뉴레이어의 출력위치와,
마우스 오버시 하위메뉴(게시판 목록) 출력 위치가 매치되지 않는 문제점이 있습니다.

2. msie인 경우, 메뉴 레이어의 깊이(z-index)의 문제가 있습니다.


특히, 브라우저별로 레이어의 출력위치가 약간씩 어긋나는 것은,
브라우저 자체의 문제와 표준태그의 사용에 대한 근본적인 문제까지 안고 있어서,
약간씩 어긋나는 그 문제는 근본적으로 해결하기가 힘이드는 것 같습니다.
나스카님 감사합니다.^^

마우스 포인트 영역이 밀리는 문제는 아래 마진값을 0으로 주시면 됩니다.
#navblock {float:left;margin-top:12px;}
마진이 필요하다면 상위 navwrap 에서 조정하는게 맞는듯 합니다.(본문 수정해 놓겠습니다)
  *아마 상위 블럭요소 abs,높이값지정시, 하위 블럭요소 톱 마진값 지정 픽셀만큼 포인터 안먹히는게 당연한데 브라우저 특성을 타는것 같습니다.(이부분은 사실 메뉴가 놓여있는 부모영역까지 검토가 필요할 경우도 있습니다)

  z-index문제는 각 블럭 요소별로 개인에 맞게 조정해주셔야 할것 같습니다.
  이때 각 블럭요소별 종속 관계까지 검토가 필요한 경우도 있군요.

그림에서 제시하신 셀렉트박스뒤로 숨는 문제는 사실 속시원한 해결책이 아직 없는듯 합니다.
학교에서 뒤져봐도 완벽한 방법을 제시한 경우를 못찾고 있습니다.
관리자님께서 알려주신 팁도 적용해 보았지만 잘 안되더군요..
  *이번 기회에 나스카님께서 일강 해주시면 많은 분들께 도움이 될것 같습니다.
통합라이브러리 파일은 받았는데 경로설정에 문제가 생겼어요.
전..루트에 그누보드를 설치했는데 꼭 g4에 그누보드를 설치해야 이 메뉴스킨이
제대로 작동하는건가요?
안녕하세요 오랜만에 인사합니다.

궁금함에 질문 드립니다.

메뉴에서 그룹명에 링크를 삭제하고 싶은데... 오느 부분을 수정해야 될지... 이것 저것하다가 메뉴달인 플록님께 문의 드립니다.

소스는
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
/////////////////////////////////////////////////////////////////////
// FF,msie호환 그룹 및 게시판 자동메뉴 - 플록
// CSS로 구현 그룹 및 게시판의 수직,수평 배열의 융통성 확보

//global start
echo "<div id='global'>\n";
    //접근가능그룹 여분필드 1 순서로 추출
    $sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE  (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0'  ORDER BY a.gr_1";
    $result = sql_query($sql);
    for ($i=0; $row=sql_fetch_array($result); $i++){
    //group
echo "<div id='group' onMouseOver='this.style.backgroundColor=\"#ff8c00\"' onMouseOut='this.style.backgroundColor=\"#66ccff\"'>\n";
    if ($row[gr_id] == $gur) {// 해당 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='on' >$row[gr_subject]</a></span>\n";
    } else { // 그외 그룹 스타일 및 링크
        echo "<span class='group_subject' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\"><a href='$g4[bbs_path]/group.php?gr_id=$row[gr_id]' class='off' >$row[gr_subject]</a></span>\n";
    }

    //board
    echo "<div id='$row[gr_id]' class='board' onmouseover=\"show('$row[gr_id]')\" onmouseout=\"hide('$row[gr_id]')\">\n";
    //게시판 권한 설정 적용, 전체 검색사용에 체크된 게시판만 검색순서에 따라 추출
    $sql1 = " select bo_subject, bo_table from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') and bo_use_search = '1' order by bo_order_search";
    $result1 = sql_query($sql1);
    for ($i1=0; $row1=sql_fetch_array($result1); $i1++) {
        //해당 게시판일때 스타일 적용
        if ($row1[bo_table] == $bo_table){
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='on'>$row1[bo_subject]</a></span>\n";
        }else{ //나머지 게시판의 스타일
            echo "<span class='board_subject'><a href='$g4[bbs_path]/board.php?bo_table=$row1[bo_table]' class='block'>$row1[bo_subject]</a></span>\n";
        }

    }
    echo "</div>\n"; //board end
    echo "</div>\n"; //group end
}
echo "</div>\n"; // global menu end
echo "<div style='clear: both;'></div>"; // 메뉴끝 줄 바꿈, 겹치기 방지
?>

이 부분 같은데, 링크부분을 수정하면 그룹명까지 사라지고해서 답답합니다.
전체 5,850 |RSS
그누4 스킨 내용 검색

회원로그인

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