반응형-햄버거메뉴 클릭시 오른쪽에서 하위메뉴 보이기

head.php에 아래 코드 넣기

 

<!-- 모바일 상단 시작 { -->

<header id="m_hd">

<h1 id="m_hd_h1"><?php echo $g5['title'] ?></h1>

 

<!--<div class="to_content"><a href="#container">본문 바로가기</a></div>-->

 

<?php

if(defined('_INDEX_')) { // index에서만 실행

include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어

} ?>

 

<div id="m_hd_wrapper">

 

<div id="m_logo">

<a href="<?php echo G5_URL ?>/index.php"><img src="<?php echo G5_IMG_URL ?>/m_logo.png" alt="<?php echo $config['cf_title']; ?>"></a>

</div>

 

<button type="button" id="m_gnb_open" class="m_hd_opener"><img src="<?php echo G5_IMG_URL ?>/m_menubar.png" alt="m_menubar"><span class="sound_only"> 메뉴열기</span></button>

 

<div id="m_gnb" class="m_hd_div">

<button type="button" id="m_gnb_close" class="m_hd_closer"><span class="sound_only">메뉴 </span>닫기</button>

 

<ul id="m_gnb_1dul">

<?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++) {

?>

<li class="m_gnb_1dli">

<a href="#" class="m_gnb_1da"><?php echo $row['me_name'] ?></a>

<!-- 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="btn_m_gnb_op">▼</button><ul class="m_gnb_2dul">'.PHP_EOL;

?>

<li class="m_gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="m_gnb_2da"><span></span><?php echo $row2['me_name'] ?></a></li>

<?php

}

 

if($k > 0)

echo '</ul>'.PHP_EOL;

?>

</li>

<?php

}

 

if ($i == 0) {  ?>

<li id="m_gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하세요.<?php } ?></li>

<?php } ?>

</ul>

</div>

 

<div class="m_hd_div" id="user_menu">

<button type="button" id="user_close" class="m_hd_closer"><span class="sound_only">메뉴 </span>닫기</button>

 

<?php echo outlogin('theme/basic'); // 외부 로그인 ?>

 

<ul id="m_hd_nb">

<li class="m_hd_nb1"><a href="<?php echo G5_BBS_URL ?>/qalist.php" id="snb_qa"><i class="fa fa-comments" aria-hidden="true"></i><br>1:1문의</a></li>

<li class="m_hd_nb2"><a href="<?php echo G5_BBS_URL ?>/faq.php" id="snb_faq"><i class="fa fa-question-circle" aria-hidden="true"></i><br>FAQ</a></li>

<li class="m_hd_nb3"><a href="<?php echo G5_BBS_URL ?>/current_connect.php" id="snb_cnt"><i class="fa fa-users" aria-hidden="true"></i><br>접속자 <span><?php echo connect('theme/basic'); // 현재 접속자수 ?></span></a></li>

<li class="m_hd_nb4"><a href="<?php echo G5_BBS_URL ?>/new.php" id="snb_new"><i class="fa fa-history" aria-hidden="true"></i><br>새글</a></li>

 

</ul>

 

<div id="text_size">

<!-- font_resize('엘리먼트id', '제거할 class', '추가할 class'); -->

<button id="size_down" onclick="font_resize('container', 'ts_up ts_up2', '', this);" class="select"><img src="<?php echo G5_URL; ?>/img/ts01.png" width="20" alt="기본"></button>

<button id="size_def" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up', this);"><img src="<?php echo G5_URL; ?>/img/ts02.png" width="20" alt="크게"></button>

<button id="size_up" onclick="font_resize('container', 'ts_up ts_up2', 'ts_up2', this);"><img src="<?php echo G5_URL; ?>/img/ts03.png" width="20" alt="더크게"></button>

</div>

</div>

 

<script>

$(function () {

//폰트 크기 조정 위치 지정

var font_resize_class = get_cookie("ck_font_resize_add_class");

if( font_resize_class == 'ts_up' ){

$("#text_size button").removeClass("select");

$("#size_def").addClass("select");

} else if (font_resize_class == 'ts_up2') {

$("#text_size button").removeClass("select");

$("#size_up").addClass("select");

}

 

$(".m_hd_opener").on("click", function() {

var $this = $(this);

var $m_hd_layer = $this.next(".m_hd_div");

 

if($m_hd_layer.is(":visible")) {

$m_hd_layer.hide();

$this.find("span").text("열기");

} else {

var $m_hd_layer2 = $(".m_hd_div:visible");

$m_hd_layer2.prev(".m_hd_opener").find("span").text("열기");

$m_hd_layer2.hide();

 

$m_hd_layer.show();

$this.find("span").text("닫기");

}

});

 

$("#container").on("click", function() {

$(".m_hd_div").hide();

 

});

 

$(".btn_m_gnb_op").click(function(){

$(this).toggleClass("btn_m_gnb_cl").next(".m_gnb_2dul").slideToggle(300);

 

});

 

$(".m_gnb_1da").click(function(){

$(this).next(".btn_m_gnb_op").trigger("click");

}); //.m_gnb_1da 클릭시 하위메뉴가 보이도록 하는 스크립트

 

$(".m_hd_closer").on("click", function() {

var idx = $(".m_hd_closer").index($(this));

$(".m_hd_div:visible").hide();

$(".m_hd_opener:eq("+idx+")").find("span").text("열기");

});

});

</script>

 

</div>

</header>

<!-- } 모바일 상단 끝 -->

 

 

 

defalte.css 미디어쿼리부분에 코드 넣기

/** 모바일 헤더 시작 **/

#hd{display:none;}

 

#m_hd {position:relative; display:block ;background:#fff;}

#m_hd:after {display:block;visibility:hidden;clear:both;content:""}

#m_hd_h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}

 

#m_logo {padding:15px 0;text-align:center; border-bottom:1px solid #eee;}

#m_logo img{vertical-align:middle; width:55%;}

#m_gnb_open {position: absolute; top: 50%; right: 10px; padding: 0 10px; width: 40px; border: 0; background-size: 70%; color: #333; transform: translateY(-50%); background: #fff;}

#m_gnb_open img{width:100%;}

#m_gnb {display:none;background:#262626;position:fixed;top:0;right:0;z-index:99999;height:100%;overflow-y:auto;width:55%;

-webkit-box-shadow:0 0 5px  rgba(55,55,5,0.4);

-moz-box-shadow:0 0 5px  rgba(55,55,5,0.4);

box-shadow: 0 0 5px  rgba(55,55,5,0.4);}

 

#m_gnb a {display: block; color: #efefef; font-size:16px; padding: 15px 5%; border-bottom: 1px solid #2d2d2d;}

.m_gnb_1dli{position:relative;}

.m_gnb_1dli button{display:none; position:absolute;top:10px;right:5%;background:rgba(255,255,255,0);padding:5%;border:1px solid #efefef;overflow:hidden;color:#efefef; transition:0.5s;}

.m_gnb_1dli button:hover{background:#0067ae; border:1px solid #0067ae;}

.m_gnb_1dli button:active{color:#222;}

.m_gnb_1dli button.btn_m_gnb_cl{background:url(../img/mobile/m_gnb_bg2.png) no-repeat 50% 50%}

.m_gnb_1da {}

.m_gnb_1da:hover{}

.m_gnb_2dul {display:none;}

.m_gnb_2da {border-bottom:1px solid #2d2d2d;background:url(../img/btn_next.gif) no-repeat 20px 50%; padding:10% 0 10% 30px; transition:0.5s; text-indent:20px;}

.m_gnb_2da:hover{background:#0067ae; font-weight:500;}

#m_gnb_close {display:block;height:50px;width:110%;border:0;background:url(../img/mobile/btn_close.png) no-repeat right 50%; background-size:3rem;color:#fff;text-indent:-999999999px;overflow:hidden;}

 

#m_gnb_empty {padding:20px 0;color:#fff;text-align:center;line-height:2em}

#m_gnb_empty a {display:inline;text-decoration:underline}

 

#m_hd_sch {text-align:center;padding:20px}

#m_hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}

#m_hd_sch form {position:relative;padding-right:40px;}

#m_hd_sch #sch_stx {width:100%;height:45px;background:#464646;border:0;padding-left:10px;border-radius:3px 0 0 3px;color:#fff}

#m_hd_sch #sch_submit {position:absolute;top:0;right:0;width:40px;height:45px;;border:0;border-radius:0 3px 3px 0;cursor:pointer;color:#fff;background:#464646;}

 

#user_btn {position:absolute;top:10px;right:10px;padding:0 10px;height:30px;width:30px;border:0;;color:#fff;font-size:16px;background:none;letter-spacing:-0.1em}

#user_menu{display:none;position:fixed;top:0;right:0;height:100%;;overflow-y:auto;width:320px;z-index:9999;background:#fff;text-align:center;

-webkit-box-shadow:0 0 5px  rgba(55,55,5,0.4);

-moz-box-shadow:0 0 5px  rgba(55,55,5,0.4);

box-shadow: 0 0 5px  rgba(55,55,5,0.4);}

#user_close {display:block;margin:0;height:50px;width:100%;border:0;background:url(../img/mobile/btn_close.png) no-repeat right 50%

#222;background-size:25px;color:#fff;text-indent:-999999999px;overflow:hidden}

#snb_cnt span{display:inline-block;padding: 0 7px;height:18px;line-height:18px;font-size:12px;background:#3ca1ff;border-radius:20px;color:#fff}

 

#m_hd_nb{margin:20px;}

#m_hd_nb:after {display:block;visibility:hidden;clear:both;content:""}

#m_hd_nb li{width:50%;float:left;text-align:center;line-height:25px;font-size:1.083em;font-weight:bold}

#m_hd_nb li a{display:block;color:#717171;padding:20px 0}

#m_hd_nb li i{font-size:20px;}

#m_hd_nb .m_hd_nb1{border-right:1px solid #e2e5e7;border-bottom:1px solid #e2e5e7}

#m_hd_nb .m_hd_nb2{border-bottom:1px solid #e2e5e7}

#m_hd_nb .m_hd_nb3{border-right:1px solid #e2e5e7}

/** 모바일 헤더 끝 **/