상단 3단 메뉴 + 사이드 3단 메뉴
- 스마일
- 3
- 5,661
- 글주소
- 12-12
- Download
- 3level_menu.txt(11.7 KB) 2018-12-1358
- Link
- https://gist.github.com/damulhan/91ae16d0e56621e85835392bfc9df95a306
기존 메뉴 소스 참고하여 편집하시면 됩니다.
* 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; }
#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; }