드롭메뉴제작중에 문제
본문
서브페이지에 대분류 중분류 드롭 메뉴 제작중입니다.
PC에서 hover말고 클릭해서 제작하고싶은데
도저히 감이 안잡힙니다.
select option 태그말고 div로 제작해서 모바일까지 연결되게 하고싶은데 어떻게 처리해야할까요
구글링 해봤는데 어렵네요 ㅠ
예시로 보여주실분 감사하겠습니다!
답변 1
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
$nav_menu = array();
$sql = "select * from {$g5['custom_menu_table']} where (1)";
$res = sql_query($sql);
for($i=0;$row=sql_fetch_array($res);$i++) {
$nav_menu[$row['me_depth']][] = $row;
}
?>
<style>
.page-navi-wrap { position: absolute; left: 0; right: 0; bottom: 100%; }
.nav-wrap { display: flex; background-color: rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.5); }
.nav { display: flex; }
.pos { display: flex; margin-left: auto; align-self: auto; }
.nav-depth { position: relative; border-right: 1px solid rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.7); }
.nav-depth > span { display: block; font-size: 1rem; font-weight: 600; padding: 0 26px; height: 58px; line-height: 58px; cursor: pointer; min-width: 180px; }
.nav-depth.is-none > span { cursor: default; }
.nav-depth.is-arrow > span:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }
.nav-depth.bg_black > span { color: #fff; }
.nav-depth.bg_white > span { color: #000; }
.nav-depth > ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; z-index: 10; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.nav-depth > ul > li { position: relative; }
.nav-depth > ul > li > a { display: block; padding: 0 26px; height: 52px; line-height: 52px; border-bottom: 1px solid #ddd; }
.nav-depth > ul > li > a:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }
@media(max-width: 768px) {
.nav { padding-left: 5px; }
.nav-depth > span { display: block; font-size: 14px; font-weight: 400; padding: 0 16px; height: 48px; line-height: 48px; cursor: pointer; min-width: 100px; }
.nav-depth > span:after { display: none; }
.nav-depth > ul > li > a { display: block; font-size: 12px; padding: 0 16px; height: 38px; line-height: 38px; border-bottom: 1px solid #ddd; }
.nav-depth > ul > li > a:after { display: none; }
}
</style>
<div class="page-navi-wrap">
<div class="page-navi-inner max-layout">
<div class="nav-wrap">
<div class="nav">
<?php
foreach($nav_menu as $key=>$val) {
$cut = $key * G5_CATE_LENGTH;
$str = substr($me_code,0,$cut);
$me_key = array_search(substr($me_code,0,$cut), array_column($val, 'me_code'));
if($me_key === false) {
continue;
}
$now_menu = $val[$me_key];
$href_cut = $cut - G5_CATE_LENGTH;
$href_str = substr($me_code,0,$href_cut);
$count = count($val);
$arrow = $count > 1 ? 'is-arrow' : 'is-none';
echo '<div class="nav-depth depth'.$key.' bg_'.BASIC_STYLE.' '.$arrow.'" data-depth="'.$key.'">';
echo '<span class="nav-now">'.$now_menu['me_name'].'</span>';
if($count > 1) {
echo '<ul>';
foreach($val as $sub) {
if($sub['me_pc_use'] != '1' && $is_mobile == false ) {
continue;
}
if($sub['me_mo_use'] != '1' && $is_mobile == true ) {
continue;
}
if($sub['me_pa_use'] == '1' && $is_mobile == true ) {
continue;
}
if($key > 1 && $href_str != substr($sub['me_code'],0,$href_cut)) {
continue;
}
$me_link = $sub['me_link'];
$target = $sub['me_target'] ? 'target="_'.$sub['me_target'].'"' : '';
echo '<li><a href="'.$me_link.'" '.$target.'><span>'.$sub['me_name'].'</span></a></li>';
}
echo '</ul>';
}
echo '</div>';
}
?>
</div>
<div class="pos">
</div>
</div>
</div>
</div>
<script>
$(function() {
$(document).on('click','.nav-now',function() {
var $that = $(this).closest('.nav-depth'),
depth1= $that.data('depth');
$.each($('.nav-depth'),function() {
var $this = $(this),
depth2 = $this.data('depth'),
$target = $this.find('ul');
if(depth1 == depth2) {
$target.slideToggle('slow');
} else {
if($target.is(':visible') === true) {
$target.slideToggle('slow');
}
}
});
});
});
</script>
말씀하신 형태로 구현된 서브메뉴입니다.
커스텀 된 내용이 조금 있어서 감안해서 보시면 될 듯 합니다.
감사합니다:-)
답변을 작성하시기 전에 로그인 해주세요.
