코드이그나이터 기반 PHP 오픈소스 게시판 : 씨아이보드

[스킨] 상단 3단 메뉴 + 사이드 3단 메뉴


기존 메뉴 소스 참고하여 편집하시면 됩니다. 


* Pagemenu2 와 연계해서 사용하시면 됩니다.  http://www.ciboard.co.kr/plugins/p/1673 

 


상단 네비게이션 


==========>


<div id="topmenu-navbar-collapse" class="navbar-collapse collapse ">

<ul class="nav navbar-nav navbar-right navbar-hover">

<?php

$menuhtml = '';

if (element('menu', $layout)) {

$menu = element('menu', $layout);

if (element(0, $menu)) {

foreach (element(0, $menu) as $mkey => $mval) {

if (element(element('men_id', $mval), $menu)) {

$mlink = element('men_link', $mval) ? element('men_link', $mval) : 'javascript:;';

$menuhtml .= "\n\t".'<li class="dropdown"><a href="' . $mlink . '" ' . element('men_custom', $mval);

if (element('men_target', $mval)) { $menuhtml .= ' target="' . element('men_target', $mval) . '"'; }

$menuhtml .= ' title="' . html_escape(element('men_name', $mval)) . '">' . (html_escape(element('men_name', $mval))) . '</a>';

$menuhtml .= "\n\t".'<ul class="dropdown-menu">';

foreach (element(element('men_id', $mval), $menu) as $skey => $sval) {

$slink = element('men_link', $sval) ? element('men_link', $sval) : 'javascript:;';

$ssmenu = element(element('men_id', $sval), $menu);

if( empty($ssmenu) ) { # 하위메뉴가 없으면

$menuhtml .= "\n\t\t".'<li><a href="' . $slink . '" ' . element('men_custom', $sval);

if (element('men_target', $sval)) { $menuhtml .= ' target="' . element('men_target', $sval) . '"'; }

$menuhtml .= ' title="' . html_escape(element('men_name', $sval)) . '">' . html_escape(element('men_name', $sval)) . '</a></li>';

} else { # 하위메뉴가 있으면

$menuhtml .= "\n\t\t".'<li class="dropdown-submenu"><a href="' . $slink . '" ' . element('men_custom', $sval);

if (element('men_target', $sval)) { $menuhtml .= ' target="' . element('men_target', $sval) . '"'; }

$menuhtml .= ' title="' . html_escape(element('men_name', $sval)) . '">' . html_escape(element('men_name', $sval)) . '</a>';

$menuhtml .= "\n\t\t".'<ul class="dropdown-menu">';

foreach (element(element('men_id', $sval), $menu) as $sskey => $ssval) {

$sslink = element('men_link', $ssval) ? element('men_link', $ssval) : 'javascript:;';

$menuhtml .= "\n\t\t\t".'<li><a href="' . $sslink . '" ' . element('men_custom', $ssval);

if (element('men_target', $ssval)) { $menuhtml .= ' target="' . element('men_target', $ssval) . '"'; }

$menuhtml .= ' title="' . html_escape(element('men_name', $ssval)) . '">' . html_escape(element('men_name', $ssval)) . '</a></li>';

}

$menuhtml .= "\n\t\t".'</ul></li>';

}

}

$menuhtml .= "\n\t".'</ul></li>';


} else {

$mlink = element('men_link', $mval) ? element('men_link', $mval) : 'javascript:;';

$menuhtml .= "\n\t".'<li><a href="' . $mlink . '" ' . element('men_custom', $mval);

if (element('men_target', $mval)) { $menuhtml .= ' target="' . element('men_target', $mval) . '"'; }

$menuhtml .= ' title="' . html_escape(element('men_name', $mval)) . '">' . html_escape(element('men_name', $mval)) . '</a></li>';

}

}

}

}

echo $menuhtml;

?>

<li>

<form class="navbar-form navbar-right" name="header_search" id="header_search" action="<?php echo site_url('search'); ?>" onSubmit="return headerSearch(this);">

<div class="form-group">

<input type="text" class="form-control px150" placeholder="검색" name="skeyword" accesskey="s" />

<button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-search"></i></button>

</div>

</form>

<script type="text/javascript">

//<![CDATA[

$(function() {

$('#topmenu-navbar-collapse .dropdown').hover(function() {

$(this).addClass('open');

}, function() {

$(this).removeClass('open');

});

});

function headerSearch(f) {

var skeyword = f.skeyword.value.replace(/(^\s*)|(\s*$)/g,'');

if (skeyword.length < 2) {

alert('2글자 이상으로 검색해 주세요');

f.skeyword.focus();

return false;

}

return true;

}

//]]>

</script>

</li>

</ul>

</div>


<==========



사이드바 


==========> 


/* 레이아웃 사이드바 참고 

## http://www.ciboard.co.kr/skin/p/489 

*/


// 만약 $view['board_key'] 값이 존재하면 게시판의 읽기또는 쓰기페이지라는 거고 없다면 url로 판단

if(isset($view['board_key'])) {

$chk_url = $view['board_key'];

} else  {

// 마지막 url 값으로 판단

$url = explode('/', $this->uri->uri_string()) ;

$chk_url = $url[count($url)-1] ;

}


if (element('menu', $layout)) {

$menu = element('menu', $layout);

// 메뉴 배열의 길이만큼 반복

foreach($menu as $ml_arr) {

foreach($ml_arr as $mll) {

#if(strstr($mll['men_link'], $chk_url)) { // 문자열 포함하고 있다면 으로 한다. 같은 카테고리에 세부 카테고리가 생길수 있으므로

$match = preg_match("/(".$chk_url.")$/", trim($mll['men_link']), $matches);

if($match) { // 문자열 포함하고 있다면 으로 한다. 같은 카테고리에 세부 카테고리가 생길수 있으므로

// 메뉴 아이디 가지고 온다. 그메뉴만 추출하기 위함

#if($mll['men_parent']) {

$currentmenu_id = $mll['men_id'] ; // 서브메뉴 없을때

$currentmenu_parentid = $mll['men_parent'];

$currentmenu_top_parentid = get_top_parentid($currentmenu_id, $menu);

#}

}

}

}

$parentids = get_parentids($currentmenu_id, $menu);

#print_r($parentids);

if (element(0, $menu)) {

foreach (element(0, $menu) as $mkey => $mval) {

if ($currentmenu_top_parentid == element('men_id', $mval)) {

$mlink = element('men_link', $mval) ? element('men_link', $mval) : 'javascript:;';

$menuhtml = '<div class="sidebar_menu"><div class="headline"><h3>';

$menuhtml .= html_escape(element('men_name', $mval)) . '</h3></div>';

// Level 1 sub menu

$menu1 = element(element('men_id', $mval), $menu);

$menuhtml .= '<ul class="level1">';

foreach ($menu1 as $skey => $sval) {

$slink = element('men_link', $sval) ? element('men_link', $sval) : 'javascript:;';

// 현재 페이지 찾는 부분

$aclass = '';

#if(preg_match("/".$chk_url."$/", trim($slink), $matches)) $aclass = 'class="on"'; 

if(in_array(element('men_id', $sval), $parentids)) $aclass = 'class="on"';

$menuhtml .= '<li><a '.$aclass.'href="' . $slink . '" ' . element('men_custom', $sval);

if (element('men_target', $sval)) $menuhtml .= ' target="' . element('men_target', $sval) . '"'; 

$menuhtml .= ' title="' . html_escape(element('men_name', $sval)) . '">' . html_escape(element('men_name', $sval)) . '</a>';

// Level 2 sub menu

$menu2 = element(element('men_id', $sval), $menu);

if($menu2 && !empty($aclass)) {

$menuhtml .= '<ul class="level2">';

foreach ($menu2 as $tkey => $tval) {

$tlink = element('men_link', $tval) ? element('men_link', $tval) : 'javascript:;';

// 현재 페이지 찾는 부분

$aclass = '';

#if(preg_match("/".$chk_url."$/", trim($tlink), $matches)) $aclass = 'class="on"'; 

if(in_array(element('men_id', $tval), $parentids)) $aclass = 'class="on"';

$menuhtml .= '<li><a '.$aclass.'href="' . $tlink . '" ' . element('men_custom', $tval);

if (element('men_target', $tval)) $menuhtml .= ' target="' . element('men_target', $tval) . '"'; 

$menuhtml .= ' title="' . html_escape(element('men_name', $tval)) . '">' . html_escape(element('men_name', $tval)) . '</a>';

$menuhtml .= "</li>\n";

}

$menuhtml .= "</ul>\n";

}

$menuhtml .= "</li>\n";

}

$menuhtml .= "</ul></div>\n";

  } else if($currentmenu_id == element('men_id', $mval)) {

$menuhtml = '<div class="sidebar_menu"><div class="headline"><h3>';

$menuhtml .= html_escape(element('men_name', $mval)) . '</h3></div>';

$menuhtml .= '<ul>';


foreach (element($currentmenu_id, $menu) as $skey => $sval) {

$slink = element('men_link', $sval) ? element('men_link', $sval) : 'javascript:;';

// 현재 페이지 찾는 부분

$aclass = '';

if(preg_match("/".$chk_url."$/", trim($slink), $matches)) {

$aclass = 'class="on"';

}

$menuhtml .= '<li><a '.$aclass.'href="' . $slink . '" ' . element('men_custom', $sval);

if (element('men_target', $sval)) {

$menuhtml .= ' target="' . element('men_target', $sval) . '"';

}

$menuhtml .= ' title="' . html_escape(element('men_name', $sval)) . '">' . html_escape(element('men_name', $sval)) . '</a></li>';

}

$menuhtml .= '</ul></div>';

} else if( $currentmenu_id == $mkey) {

#$menuhtml .= '<ul>';

$mlink = element('men_link', $mval) ? element('men_link', $mval) : 'javascript:;';

$menuhtml .= '<li><a '.$aclass.' href="' . $mlink . '" ' . element('men_custom', $mval);

if (element('men_target', $mval)) {

$menuhtml .= ' target="' . element('men_target', $mval) . '"';

}

$menuhtml .= ' title="' . html_escape(element('men_name', $mval)) . '">' . html_escape(element('men_name', $mval)) . '</a></li>';

#$menuhtml .= '</ul>';

}

}

}

}

?>

<?php if(isset($menuhtml)): ?>

<div class="widget section_03">

<div id="sidemenu2">

<?php 

// 만약 현재 페이지에서 메뉴가 없다면 노출한다. 

echo $menuhtml; 

?>

</div>

</div>

<?php endif; ?>


<========== 



CSS 


============>


/* for multilevel dropdown menu */

.dropdown-submenu { position: relative; }

.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: 20px; margin-top: -6px; margin-left: -1px; background: #3ddde6; } 

.dropdown-submenu:hover > .dropdown-menu { display: block; } 

.dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } 

.dropdown-submenu:hover > a:after { border-left-color: #fff; } 

.dropdown-submenu.pull-left { float: none; } 

.dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } 

.dropdown-submenu > .dropdown-menu li { overflow: hidden; padding-left: 5px; width: 200px; } 

.dropdown-submenu > .dropdown-menu li a { overflow: hidden; } 



/* sidemenu */ 
#sidemenu2 .sidebar_menu { display: block; margin: 0; padding: 10px 15px 10px 15px; font-weight: bold; font-size: 15px; color: #0f5186; } 

#sidemenu2 .sidebar_menu .headline { margin: 20px 0 20px; }

#sidemenu2 .sidebar_menu .headline h3 { display: inline-block; margin: 0 0 -2px; padding-bottom: 5px; font-size: 24px; border-bottom: none; }

#sidemenu2 ul { list-style: none; margin: 0; padding: 0; }

#sidemenu2 ul li { display: block; margin: 0; padding: 5px 0px 5px 0px; font-size: 14px; font-weight: normal; color: #0f5186; border-bottom: 1px solid #ddd; }

#sidemenu2 ul li a { color: #0f5186; font-weight: normal; }

#sidemenu2 ul li a.on { font-weight: bold; }

#sidemenu2 ul li:last-child { border-bottom: none; }

#sidemenu2 ul.level2 { padding: 5px 0 10px 10px; }

#sidemenu2 ul.level2 li { border-bottom: none; font-size: 12px; margin: 0; padding: 0; }


<==============


관련 함수 

================>
function get_menu($menu_id, $menu) {
foreach($menu as $ml) {
foreach($ml as $mll) {
if($mll['men_id'] == $menu_id)
return $mll;
}
}
return null;
}

function get_parentids($menu_id, $menu) {
$ids = array();
$ml = get_menu($menu_id, $menu);
while($ml['men_parent'] != 0) {
array_push($ids, $ml['men_id']);
$ml = get_menu($ml['men_parent'], $menu);
}
array_push($ids, $ml['men_id']);
return $ids;
}

function get_top_parentid($menu_id, $menu) {
return array_pop(get_parentids($menu_id, $menu));
}

<================
 

* 관련 소스: 

Pagemenu2 와 연계해서 사용하시면 됩니다. 

http://www.ciboard.co.kr/plugins/p/1673 



1
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오톡으로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

스킨자료실

번호 제목 글쓴이 날짜 조회수
공지 Github 운영을 시작합니다 +8 icon 관리자 11-19 1,094
공지 씨아이보드 3 배포 안내 +15 icon 관리자 11-09 1,535
3 스킨 상단 3단 메뉴 + 사이드 3단 메뉴 +2 스마일 12-12 188
2 기타 레이아웃 pc/mobile 분기 예제입니다 +1 혀니혀니 11-27 181
1 기타 레이아웃 사이드바 +5 샤오란 04-08 5,362