PC용 기본으로 간단한 전체 풀다운메뉴 정보
PC용 기본으로 간단한 전체 풀다운메뉴본문
(저장용)
그누보드 5.4.4.8 버전기준 기본 테마 basic PC용
간단한 전체 풀다운?메뉴
기본 틀 그대로 이용
head.php
<nav id="gnb">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<ul id="gnb_1dul">
<li class="gnb_1dli gnb_mnal"><button type="button" class="gnb_menu_btn" title="전체메뉴"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
<?php
$menu_datas = get_menu_db(0, true);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
$add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
?>
<!-- 여기서 부터 수정 -->
<li class="gnb_1dli <?php echo $add_class; ?>" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<!-- 여기서 부터 삭제 -->
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<span class="bg">하위분류</span><div class="gnb_2dul"><ul class="gnb_2dul_box">'.PHP_EOL;
?>
<li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul></div>'.PHP_EOL;
?>
<!-- 여기까지 삭제 -->
</li>
■수정할 부분 (1)
<li class="gnb_1dli <?php echo $add_class; ?>" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
■수정
<li class="gnb_1dli gnb_mnal">
<a href="#" class="gnb_menu_btn"><?php echo $row['me_name'] ?></a>
하단 스크립트 수정
■수정할 부분 (2)
<script>
$(function(){
$(".gnb_menu_btn").click(function(){
$("#gnb_all, #gnb_all_bg").show();
});
$(".gnb_close_btn, #gnb_all_bg").click(function(){
$("#gnb_all, #gnb_all_bg").hide();
});
});
</script>
■수정
<script>
$(document).ready(function(){
$('#gnb_all_bg').hide();
$('.gnb_menu_btn').mouseover(function(){
$('#gnb_all, #gnb_all_bg').slideDown();
});
$('#gnb_all').mouseleave(function(){
$('#gnb_all, #gnb_all_bg').hide();
});
});
$(".gnb_close_btn").click(function(){
$("#gnb_all, #gnb_all_bg").hide();
});
</script>
■default.css 수정
메뉴 fa fa-bars 버튼 스타일 시트를 그대로 사용해서 일부 수정이 필요함
#gnb .gnb_mnal {padding-right: 100px} /*좌우패딩값*/
#gnb .gnb_menu_btn {background: #fff; color: #383838;
width: 50px;height: 55px;border: 0;vertical-align: top;font-size: 18px;}
/*메뉴 컬러, 바탕색 수정*/
#gnb_all .gnb_al_li li a:hover {color: #f00} /*마우스오버시 컬러변경 */
재미있는 사진설명
마우스올리면, 전체메뉴가 생기고
마우스 내리면 전체메뉴 사라짐
p.s.
패치가 너무많아서 너무 힘든 한주입니다
5