테마 메뉴구조 변경
본문
해당코드는 헤더 hover시에 전체 서브메뉴가 나오는 올메뉴 구조인데, 대메뉴 1개 hover시에 그 해당 서브메뉴만 나올수 있는 구조로 변경하고 싶은데 어떻게 손을 봐야할지 모르겠네요 ㅜㅜ 도움 부탁드립니다..css는 제가 수정하려고합니다!
head.sub.php
<section class="header">
<a href="<?php echo G5_URL ?>" class="logo" title="프랜디어"></a>
<ul class="menu">
<?php
$menu_datas = get_menu_db(0, true);
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
$add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
?>
<li><h2><?php echo $row['me_name'] ?></h2>
<ul class="depth-1">
<li class="m-open">
<?php
foreach( (array) $row['sub'] as $row2 ){
echo '<a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'">'.$row2['me_name'].'</a>';
}
?>
</li>
</ul>
</li>
<?php } ?>
</ul>
</section>
main.js
function isSitemap() {
return $('.header').hasClass('stm-hd') ? true : false;
}
$('.menu').mouseover(function(){
$('.menu > li').addClass('open');
var blind_height = $('.open > ul').height();
$('.header').css("height",blind_height + 200 +"px");
}).mouseleave(function(){
$('.menu > li').removeClass('open');
$('.header').css("height","100px");
})
/* header */
$('.menu > li').mouseover(function(){
if(!isSitemap()) {
$(this).addClass('on');
}
});
$('.menu > li').mouseleave(function(){
if (!isSitemap()) {
$(this).removeClass('on');
}
});
/* header scroll */
$('.header').mouseover(function(){
if (!isSitemap()) {
$(this).addClass('on');
}
});
$('.header').mouseleave(function(){
if(!$(document).scrollTop() > 0){
$(this).removeClass('on');
}
});
$('.con-tab-menu li a').click(function(){
$('.con-tab').removeClass('active');
$('.con-tab[data-id="'+$(this).attr('data-id')+'"]').addClass('active');
$('.con-tab-menu li a').removeClass('active');
$(this).parent().find('a').addClass('active');
});
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<?php
define('G5_URL', '/');
function get_menu_db() {
$arr = [
['me_name' => 'A-1', 'sub' => []],
['me_name' => 'A-2', 'sub' => [
['me_name' => 'A-2-1', 'me_link' => '/', 'me_target' => 'self'],
['me_name' => 'A-2-2', 'me_link' => '/', 'me_target' => 'self'],
['me_name' => 'A-2-3', 'me_link' => '/', 'me_target' => 'self'],
]],
['me_name' => 'A-3', 'sub' => [
['me_name' => 'A-3-1', 'me_link' => '/', 'me_target' => 'self'],
['me_name' => 'A-3-2', 'me_link' => '/', 'me_target' => 'self'],
]],
['me_name' => 'A-4', 'sub' => []],
];
return $arr;
}
?>
<style>
.header ul {
list-style-type: none;
padding: 0;
}
.header ul.menu {
background-color: #eee;
display: flex;
}
.header ul.menu > li {
flex-grow: 1;
position: relative;
}
.header ul.menu h2 {
margin: 0;
height: 3em;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
cursor: pointer;
}
.header ul[class|="depth"] {
display: none;
background-color: #ddd;
position: absolute;
width: 100%;
}
.header ul[class|="depth"] a {
display: block;
padding: 0.5em;
}
/* each submenu */
.header ul.menu > li:hover ul[class|="depth"] {
display: block;
}
/* all submenu */
/*
.header:hover ul[class|="depth"] {
display: block;
}
*/
</style>
<section class="header">
<a href="<?php echo G5_URL ?>" class="logo" title="프랜디어"></a>
<ul class="menu">
<?php
$menu_datas = get_menu_db(0, true);
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
$add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
?>
<li><h2><?php echo $row['me_name'] ?></h2>
<ul class="depth-1">
<!-- <li class="m-open"> -->
<?php
foreach( (array) $row['sub'] as $row2 ){
echo '<li class="m-open">';
echo '<a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'">'.$row2['me_name'].'</a>';
echo '</li>';
}
?>
<!-- </li> -->
</ul>
</li>
<?php } ?>
</ul>
</section>
답변 감사드립니다!
답변을 작성하시기 전에 로그인 해주세요.
