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. 

패치가 너무많아서 너무 힘든 한주입니다