[5.3] 상단메뉴를 커뮤니티처럼 풀다운으로 변경 (2018-11-29 20:13 수정)

영카트 쇼핑몰은 왼쪽메뉴에 쇼핑몰 메뉴가 보이도록 js와 css가 구성되어 있습니다.
이것을 커뮤니티의 상단메뉴 즉, 환경설정 > 메뉴관리에 적용된것이 보이도록 하고자 합니다.

적용예제 : http://test5.happyjung.com/g5/shop/



1. 변경이력

2018-11-28 10:37  최초배포

2018-11-29 14:08  v.2
   jquery.shop.menu2.js  수정
   submenu_hide  를  submenu_hide2  로 변경

2018-11-29 20:13  v.3
   모바일일때의 메뉴가 보이도록 내용 추가



2. js / jquery.shop.menu2.js 파일을 생성해서 아래 내용을 저장합니다.

$(function(){
    var hide_menu = false;
    var mouse_event = false;
    var oldX = oldY = 0;

    $(document).mousemove(function(e) {
        if(oldX == 0) {
            oldX = e.pageX;
            oldY = e.pageY;
        }

        if(oldX != e.pageX || oldY != e.pageY) {
            mouse_event = true;
        }
    });

    // 주메뉴
    var $gnb_shop = $(".gnb_shop_1dli > a");
    $gnb_shop.mouseover(function() {
        if(mouse_event) {
            $("#hd").addClass("hd_zindex");
            $(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
            $(this).parent().addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
            menu_rearrange($(this).parent());
            hide_menu = false;
        }
    });

    $gnb_shop.mouseout(function() {
        hide_menu = true;
    });

    $(".gnb_shop_2dli").mouseover(function() {
        hide_menu = false;
    });

    $(".gnb_shop_2dli").mouseout(function() {
        hide_menu = true;
    });

    $gnb_shop.focusin(function() {
        $("#hd").addClass("hd_zindex");
        $(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
        $(this).parent().addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
        menu_rearrange($(this).parent());
        hide_menu = false;
    });

    $gnb_shop.focusout(function() {
        hide_menu = true;
    });

    $(".gnb_shop_2da").focusin(function() {
        $(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
        var $gnb_shop_li = $(this).closest(".gnb_shop_1dli").addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
        menu_rearrange($(this).closest(".gnb_shop_1dli"));
        hide_menu = false;
    });

    $(".gnb_shop_2da").focusout(function() {
        hide_menu = true;
    });

    $('#gnb_shop_1dul>li').bind('mouseleave',function(){
        submenu_hide2();
    });

    $(document).bind('click focusin',function(){
        if(hide_menu) {
            submenu_hide2();
        }
    });
});

function submenu_hide2() {
    $("#hd").removeClass("hd_zindex");
    $(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
}

function menu_rearrange(el)
{
    var width = $("#gnb_shop_1dul").width();
    var left = w1 = w2 = 0;
    var idx = $(".gnb_shop_1dli").index(el);
    var max_menu_count = 0;
    var $gnb_shop_1dli;

    for(i=0; i<=idx; i++) {
        $gnb_shop_1dli = $(".gnb_shop_1dli:eq("+i+")");
        w1 = $gnb_shop_1dli.outerWidth();

        if($gnb_shop_1dli.find(".gnb_shop_2dul").size())
            w2 = $gnb_shop_1dli.find(".gnb_shop_2dli > a").outerWidth(true);
        else
            w2 = w1;

        if((left + w2) > width) {
            if(max_menu_count == 0)
                max_menu_count = i + 1;
        }

        if(max_menu_count > 0 && (idx + 1) % max_menu_count == 0) {
            el.removeClass("gnb_shop_1dli_over").addClass("gnb_shop_1dli_over2");
            left = 0;
        } else {
            left += w1;
        }
    }
}



3. theme / basic / css / default.shop.css 에 아래 내용을 추가합니다.

/*사이드 메뉴*/


위에 아래 내용을 추가합니다.


/* 메인메뉴 */
#gnb_shop{position:relative; background:#253dbe;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.3)}
#gnb_shop h2{position:absolute;font-size:0;line-height:0;overflow:hidden;}
#gnb_shop .gnb_shop_wrap{margin:0 auto;width:1200px;position:relative}
#gnb_shop #gnb_shop_1dul {font-size:1.083em;padding: 0;background:#253dbe;zoom:1;}
#gnb_shop ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_shop .gnb_shop_1dli{float:left;line-height:50px;padding:0 40px;position:relative;}
#gnb_shop .gnb_shop_1dli:hover{background:#1a30a7;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}

.gnb_shop_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
.gnb_shop_1da {display:inline-block;font-weight:bold;color:#fff;text-decoration:none;}
.gnb_shop_2dli{border-top:1px solid #253dbe}
.gnb_shop_2dli:first-child{border:0}
.gnb_shop_2dul {display:none;position:absolute;top:50px;min-width:180px;background:#1a30a7;padding: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 1px 5px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.gnb_shop_2da {display:block;padding:0 10px;line-height:40px;color:#c3e6f2;text-align:left;text-decoration:none}
a.gnb_shop_2da:hover{background:#0e2080;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

.gnb_shop_1dli_air .gnb_shop_2da {}
.gnb_shop_1dli_on .gnb_shop_2da {}
.gnb_shop_2da:focus, .gnb_shop_2da:hover {color:#fff}
.gnb_shop_1dli_over .gnb_shop_2dul {display:block;left:0}
.gnb_shop_1dli_over2 .gnb_shop_2dul {display:block;right:0;background:#fff}
.gnb_shop_wrap .gnb_shop_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;color:#fff}
.gnb_shop_wrap .gnb_shop_empty a{color:#fff;text-decoration:underline}
.gnb_shop_wrap .gnb_shop_al_ul .gnb_shop_empty, .gnb_shop_wrap .gnb_shop_al_ul .gnb_shop_empty a{color:#555}

#gnb_shop .gnb_shop_menu_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
#gnb_shop .gnb_shop_close_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;left:0}
#gnb_shop .gnb_shop_mnal{padding:0}

#gnb_shop_all{display:none;position:absolute;width:100%;z-index:99;}
#gnb_shop_all .gnb_shop_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_shop_all .gnb_shop_al_ul{background:#fff;border:1px solid #4158d1;padding:20px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
#gnb_shop_all .gnb_shop_al_li{background:#fff;float:left;min-width:20%;padding:5px }
#gnb_shop_all .gnb_shop_al_li .gnb_shop_al_a{font-size:1.083em;padding:10px;display:block;position:relative;margin-bottom:10px;background: #eff6f9;border-bottom: 1px solid #d9e8ed;font-weight: bold;color:#003e61}
#gnb_shop_all .gnb_shop_al_li li {padding-left:10px;line-height:2em}
#gnb_shop_all .gnb_shop_al_li li i{color:#9ca6cc}
#gnb_shop_all .gnb_shop_al_li li a{color:#555}



4. theme / basic / head.sub.php 에서

<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>

를 아래와 같이 변경합니다.

<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu2.js?ver=<?php echo G5_JS_VER; ?>"></script>



5. theme / basic / shop / shop.head.php 의 상단 메뉴위치의 내용을 변경합니다.

    <div id="hd_menu">
        <ul>
            <li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">히트상품</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">최신상품</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></li>
            <li class="hd_menu_right"><a href="<?php echo G5_BBS_URL; ?>/faq.php">FAQ</a></li>
            <li class="hd_menu_right"><a href="<?php echo G5_BBS_URL; ?>/qalist.php">1:1문의</a></li>
            <li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/personalpay.php">개인결제</a></li>
            <li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/itemuselist.php">사용후기</a></li>
            <li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/couponzone.php">쿠폰존</a></li>

        </ul>
    </div>

의 내용을 아래의 것으로 변경합니다.

    <nav id="gnb_shop">
        <h2>메인메뉴</h2>
        <div class="gnb_shop_wrap">
            <ul id="gnb_shop_1dul">
                <li class="gnb_shop_1dli gnb_shop_mnal"><button type="button" class="gnb_shop_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
                <?php
                $sql = " select *
                            from {$g5['menu_table']}
                            where me_use = '1'
                              and length(me_code) = '2'
                            order by me_order, me_id ";
                $result = sql_query($sql, false);
                $gnb_shop_zindex = 999; // gnb_shop_1dli z-index 값 설정용
                $menu_datas = array();

                for ($i=0; $row=sql_fetch_array($result); $i++) {
                    $menu_datas[$i] = $row;

                    $sql2 = " select *
                                from {$g5['menu_table']}
                                where me_use = '1'
                                  and length(me_code) = '4'
                                  and substring(me_code, 1, 2) = '{$row['me_code']}'
                                order by me_order, me_id ";
                    $result2 = sql_query($sql2);
                    for ($k=0; $row2=sql_fetch_array($result2); $k++) {
                        $menu_datas[$i]['sub'][$k] = $row2;
                    }

                }

                $i = 0;
                foreach( $menu_datas as $row ){
                    if( empty($row) ) continue; 
                ?>
                <li class="gnb_shop_1dli" style="z-index:<?php echo $gnb_shop_zindex--; ?>">
                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_shop_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><ul class="gnb_shop_2dul">'.PHP_EOL;
                    ?>
                        <li class="gnb_shop_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_shop_2da"><?php echo $row2['me_name'] ?></a></li>
                    <?php
                    $k++;
                    }   //end foreach $row2

                    if($k > 0)
                        echo '</ul>'.PHP_EOL;
                    ?>
                </li>
                <?php
                $i++;
                }   //end foreach $row

                if ($i == 0) {  ?>
                    <li class="gnb_shop_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                <?php } ?>
            </ul>
            <div id="gnb_shop_all">
                <h2>전체메뉴</h2>
                <ul class="gnb_shop_al_ul">
                    <?php
                    
                    $i = 0;
                    foreach( $menu_datas as $row ){
                    ?>
                    <li class="gnb_shop_al_li">
                        <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_shop_al_a"><?php echo $row['me_name'] ?></a>
                        <?php
                        $k = 0;
                        foreach( (array) $row['sub'] as $row2 ){
                            if($k == 0)
                                echo '<ul>'.PHP_EOL;
                        ?>
                            <li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><i class="fa fa-caret-right" aria-hidden="true"></i> <?php echo $row2['me_name'] ?></a></li>
                        <?php
                        $k++;
                        }   //end foreach $row2

                        if($k > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
                    <?php
                    $i++;
                    }   //end foreach $row

                    if ($i == 0) {  ?>
                        <li class="gnb_shop_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                    <?php } ?>
                </ul>
                <button type="button" class="gnb_shop_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
            </div>
        </div>
    </nav>
    <script>
    $(function(){
        $(".gnb_shop_menu_btn").click(function(){
            $("#gnb_shop_all").show();
        });
        $(".gnb_shop_close_btn").click(function(){
            $("#gnb_shop_all").hide();
        });
    });
    </script>



6. theme / basic / mobile / shop / category.php 내용에서 54 ~ 147줄

            <li id="cate_01"  class="con">
                <?php
                $mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
                $mshop_ca_res1 = sql_query(get_mshop_category('', 2));
                for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
                    if($i == 0)
                        echo '<ul class="cate">'.PHP_EOL;
                ?>
                    <li>
                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>
                        <?php
                        $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
                        if(sql_num_rows($mshop_ca_res2))
                            echo '<button class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row1['ca_name']).' 하위분류 열기</button>'.PHP_EOL;

                        for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
                            if($j == 0)
                                echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
                        ?>
                            <li>
                                <a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>
                                <?php
                                $mshop_ca_res3 = sql_query(get_mshop_category($mshop_ca_row2['ca_id'], 6));
                                if(sql_num_rows($mshop_ca_res3))
                                    echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row2['ca_name']).' 하위분류 열기</button>'.PHP_EOL;

                                for($k=0; $mshop_ca_row3=sql_fetch_array($mshop_ca_res3); $k++) {
                                    if($k == 0)
                                        echo '<ul class="sub_cate sub_cate2">'.PHP_EOL;
                                ?>
                                    <li>
                                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row3['ca_id']; ?>"><?php echo get_text($mshop_ca_row3['ca_name']); ?></a>
                                        <?php
                                        $mshop_ca_res4 = sql_query(get_mshop_category($mshop_ca_row3['ca_id'], 8));
                                        if(sql_num_rows($mshop_ca_res4))
                                            echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row3['ca_name']).' 하위분류 열기</button>'.PHP_EOL;

                                        for($m=0; $mshop_ca_row4=sql_fetch_array($mshop_ca_res4); $m++) {
                                            if($m == 0)
                                                echo '<ul class="sub_cate sub_cate3">'.PHP_EOL;
                                        ?>
                                            <li>
                                                <a href="<?php echo $mshop_ca_href.$mshop_ca_row4['ca_id']; ?>"><?php echo get_text($mshop_ca_row4['ca_name']); ?></a>
                                                <?php
                                                $mshop_ca_res5 = sql_query(get_mshop_category($mshop_ca_row4['ca_id'], 10));
                                                if(sql_num_rows($mshop_ca_res5))
                                                    echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row4['ca_name']).' 하위분류 열기</button>'.PHP_EOL;

                                                for($n=0; $mshop_ca_row5=sql_fetch_array($mshop_ca_res5); $n++) {
                                                    if($n == 0)
                                                        echo '<ul class="sub_cate sub_cate4">'.PHP_EOL;
                                                ?>
                                                    <li>
                                                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row5['ca_id']; ?>"><?php echo get_text($mshop_ca_row5['ca_name']); ?></a>
                                                    </li>
                                                <?php
                                                }

                                                if($n > 0)
                                                    echo '</ul>'.PHP_EOL;
                                                ?>
                                            </li>
                                        <?php
                                        }

                                        if($m > 0)
                                            echo '</ul>'.PHP_EOL;
                                        ?>
                                    </li>
                                <?php
                                }

                                if($k > 0)
                                    echo '</ul>'.PHP_EOL;
                                ?>
                            </li>
                        <?php
                        }

                        if($j > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
                <?php
                }

                if($i > 0)
                    echo '</ul>'.PHP_EOL;
                else
                    echo '<p>등록된 분류가 없습니다.</p>'.PHP_EOL;
                ?>
            </li>

내용을 아래와 같이 변경합니다.

            <li id="cate_01"  class="con">
                <?php
                $sql = " select *
                            from {$g5['menu_table']}
                            where me_mobile_use = '1'
                              and length(me_code) = '2'
                            order by me_order, me_id ";
                $result = sql_query($sql, false);
    
                for($i=0; $row=sql_fetch_array($result); $i++) {
                    if($i == 0)
                        echo '<ul class="cate">'.PHP_EOL;
                ?>
                    <li>
                        <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
                        <?php
                        $sql2 = " select *
                                    from {$g5['menu_table']}
                                    where me_mobile_use = '1'
                                      and length(me_code) = '4'
                                      and substring(me_code, 1, 2) = '{$row['me_code']}'
                                    order by me_order, me_id ";
                        $result2 = sql_query($sql2);
    
                        for ($k=0; $row2=sql_fetch_array($result2); $k++) {
                            if($k == 0)
                                echo '<button type="button" class="sub_ct_toggle ct_op">하위분류</button><ul class="sub_cate sub_cate1">'.PHP_EOL;
                        ?>
                            <li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><span></span><?php echo $row2['me_name'] ?></a></li>
                        <?php
                        }
    
                        if($k > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
                <?php
                }

                if($i > 0)
                    echo '</ul>'.PHP_EOL;
                else
                    echo '<p>등록된 메뉴가 없습니다.</p>'.PHP_EOL;
                ?>
            </li>