테마 메뉴구조 변경 채택완료
해당코드는 헤더 hover시에 전체 서브메뉴가 나오는 올메뉴 구조인데, 대메뉴 1개 hover시에 그 해당 서브메뉴만 나올수 있는 구조로 변경하고 싶은데 어떻게 손을 봐야할지 모르겠네요 ㅜㅜ 도움 부탁드립니다..css는 제가 수정하려고합니다!
head.sub.php
</strong></p>
<p> </p>
<p><section class="header"></p>
<p> <a href="<?php echo G5_URL ?>" class="logo" title="프랜디어"></a></p>
<p> <ul class="menu"></p>
<p> <?php</p>
<p> $menu_datas = get_menu_db(0, true);</p>
<p> foreach( $menu_datas as $row ){</p>
<p> if( empty($row) ) continue;</p>
<p> $add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';</p>
<p> ?></p>
<p> <li><h2><?php echo $row['me_name'] ?></h2></p>
<p> <ul class="depth-1"></p>
<p> <li class="m-open"></p>
<p> <?php</p>
<p> foreach( (array) $row['sub'] as $row2 ){</p>
<p> echo '<a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'">'.$row2['me_name'].'</a>';</p>
<p> }</p>
<p> ?></p>
<p> </li> </p>
<p> </ul></p>
<p> </li></p>
<p> <?php } ?></p>
<p> </ul> </p>
<p> </section></p>
<p><strong>
main.js
</strong></p>
<p>function isSitemap() {</p>
<p> return $('.header').hasClass('stm-hd') ? true : false;</p>
<p> }</p>
<p> </p>
<p> $('.menu').mouseover(function(){</p>
<p> $('.menu > li').addClass('open');</p>
<p> var blind_height = $('.open > ul').height(); </p>
<p> $('.header').css("height",blind_height + 200 +"px");</p>
<p> }).mouseleave(function(){</p>
<p> $('.menu > li').removeClass('open');</p>
<p> $('.header').css("height","100px"); </p>
<p> })</p>
<p> </p>
<p> /* header */</p>
<p> $('.menu > li').mouseover(function(){ </p>
<p> if(!isSitemap()) {</p>
<p> $(this).addClass('on'); </p>
<p> }</p>
<p> });</p>
<p> $('.menu > li').mouseleave(function(){</p>
<p> if (!isSitemap()) {</p>
<p> $(this).removeClass('on'); </p>
<p> }</p>
<p> });</p>
<p> </p>
<p> /* header scroll */</p>
<p> $('.header').mouseover(function(){</p>
<p> if (!isSitemap()) {</p>
<p> $(this).addClass('on');</p>
<p> }</p>
<p> });</p>
<p> $('.header').mouseleave(function(){</p>
<p> if(!$(document).scrollTop() > 0){</p>
<p> $(this).removeClass('on');</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> $('.con-tab-menu li a').click(function(){</p>
<p> $('.con-tab').removeClass('active');</p>
<p> $('.con-tab[data-id="'+$(this).attr('data-id')+'"]').addClass('active');</p>
<p> $('.con-tab-menu li a').removeClass('active');</p>
<p> $(this).parent().find('a').addClass('active');</p>
<p> });</p>
<p> </p>
<p><strong>
답변 1개
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><?php
define('G5_URL', '/');</p>
<p> </p>
<p>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' => []],
];</p>
<p> return $arr;
}
?></p>
<p> </p>
<p><style>
.header ul {
list-style-type: none;
padding: 0;
}</p>
<p> </p>
<p>.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;
}</p>
<p> </p>
<p>/* each submenu */
.header ul.menu > li:hover ul[class|="depth"] {
display: block;
}</p>
<p>
/* all submenu */
/*
.header:hover ul[class|="depth"] {
display: block;
}
*/
</style></p>
<p> </p>
<p><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></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인