From 5e596ba61e2464144b87abc0d2da985df4ddab11 Mon Sep 17 00:00:00 2001
From: ChanMyeong <dece24@gmail.com>
Date: Fri, 21 Sep 2012 06:41:37 +0000
Subject: [PATCH] Issue 2444. GNB vertical toggle. GMB mobile toggle. #site
 vertical height resize.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11431 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/admin/tpl/_footer.html      |  29 -------
 modules/admin/tpl/_header.html      |  32 +++++++-
 modules/admin/tpl/css/admin.css     |  34 ++++++--
 modules/admin/tpl/css/admin.min.css |  34 ++++++--
 modules/admin/tpl/js/admin.js       |  55 +++++++++++--
 modules/admin/tpl/js/admin.min.js   | 118 +++++++++++++++++++++++++++-
 modules/menu/tpl/site_design.html   |   8 +-
 modules/menu/tpl/sitemap.html       |  28 +++----
 8 files changed, 264 insertions(+), 74 deletions(-)

diff --git a/modules/admin/tpl/_footer.html b/modules/admin/tpl/_footer.html
index ca490323e..527000b51 100644
--- a/modules/admin/tpl/_footer.html
+++ b/modules/admin/tpl/_footer.html
@@ -1,32 +1,3 @@
-		<!-- GNB -->
-		<nav class="gnb" id="gnb">
-			<ul>
-				<li loop="$gnbUrlList=>$key,$value" class="active open"|cond="$parentSrl==$key || $value['href']=='index.php?module=admin' && !$mid && !$act"><a href="{getFullUrl('')}{$value['href']}"><span class="tx">{$value['text']}</span></a>
-					<ul cond="count($value['list'])">
-						<li loop="$value['list']=>$key2,$value2" class="active_"|cond="$value2['text'] == $subMenuTitle"><a href="{getFullUrl('')}{$value2['href']}">{$value2['text']}</a></li>
-					</ul>
-				</li>
-				<li>
-					<a href="#favorite"><span class="tx">{$lang->favorite}</span></a>
-					<ul id="favorite">
-						<li loop="$favorite_list => $favorite">
-							<a href="{getUrl('', 'module', 'admin', 'act', $favorite->admin_index_act)}">{$favorite->title}</a>
-							<form class="remove" action="./">
-								<input type="hidden" name="module" value="admin" />
-								<input type="hidden" name="act" value="procAdminToggleFavorite" />
-								<input type="hidden" name="site_srl" value="0" />
-								<input type="hidden" name="module_name" value="{$favorite->module}" />
-								<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin')}" />
-								<button type="submit" class="x_close" title="{$lang->cmd_delete}">&times;</button>
-							</form>
-						</li>
-						<li cond="!is_array($favorite_list) || count($favorite_list) < 1"><a href="{getUrl('', 'module', 'admin', 'act', 'dispModuleAdminContent')}">{$lang->no_data}</a></li>
-					</ul>
-				</li>
-				<li><a href="#gnb"><span class="tx openAll">{$lang->open_all}</span><span class="tx closeAll">{$lang->close_all}</span></a></li>
-			</ul>
-		</nav>
-		<!-- /GNB -->
 	</div>
 	<!-- /BODY -->
 	<footer class="footer">
diff --git a/modules/admin/tpl/_header.html b/modules/admin/tpl/_header.html
index 7531bf3c5..1873a3495 100644
--- a/modules/admin/tpl/_header.html
+++ b/modules/admin/tpl/_header.html
@@ -20,4 +20,34 @@
 		</div>
 	</header>
 	<!-- BODY -->
-	<div class="body">
\ No newline at end of file
+	<div class="body wide">
+		<!-- GNB -->
+		<nav class="gnb" id="gnb">
+			<a href="#gnbNav"><i class="x_icon-align-justify"></i> 메뉴열기/닫기</a>
+			<ul id="gnbNav">
+				<li loop="$gnbUrlList=>$key,$value" class="active open"|cond="$parentSrl==$key || $value['href']=='index.php?module=admin' && !$mid && !$act"><a href="{getFullUrl('')}{$value['href']}"><span class="tx">{$value['text']}</span></a>
+					<ul cond="count($value['list'])">
+						<li loop="$value['list']=>$key2,$value2" class="active_"|cond="$value2['text'] == $subMenuTitle"><a href="{getFullUrl('')}{$value2['href']}">{$value2['text']}</a></li>
+					</ul>
+				</li>
+				<li>
+					<a href="#favorite"><span class="tx">{$lang->favorite}</span></a>
+					<ul id="favorite">
+						<li loop="$favorite_list => $favorite">
+							<a href="{getUrl('', 'module', 'admin', 'act', $favorite->admin_index_act)}">{$favorite->title}</a>
+							<form class="remove" action="./">
+								<input type="hidden" name="module" value="admin" />
+								<input type="hidden" name="act" value="procAdminToggleFavorite" />
+								<input type="hidden" name="site_srl" value="0" />
+								<input type="hidden" name="module_name" value="{$favorite->module}" />
+								<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin')}" />
+								<button type="submit" class="x_close" title="{$lang->cmd_delete}">&times;</button>
+							</form>
+						</li>
+						<li cond="!is_array($favorite_list) || count($favorite_list) < 1"><a href="{getUrl('', 'module', 'admin', 'act', 'dispModuleAdminContent')}">{$lang->no_data}</a></li>
+					</ul>
+				</li>
+				<li><a href="#gnb"><span class="tx openAll">{$lang->open_all}</span><span class="tx closeAll">{$lang->close_all}</span></a></li>
+			</ul>
+		</nav>
+		<!-- /GNB -->
diff --git a/modules/admin/tpl/css/admin.css b/modules/admin/tpl/css/admin.css
index c4af756c3..ff589caeb 100644
--- a/modules/admin/tpl/css/admin.css
+++ b/modules/admin/tpl/css/admin.css
@@ -51,16 +51,19 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.header{border-radius:5px 5px 0 0;padding:10px 15px;zoom:1;border-bottom:1px solid #ddd;background:#f6f6f6;background:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#F1F1F1));background:-moz-linear-gradient(top,#F6F6F6,#F1F1F1);background:-o-linear-gradient(top,#F6F6F6,#F1F1F1)}
 .x>.header:after{content:"";display:block;clear:both}
 .x>.body{zoom:1;padding:0 20px 0 240px}
+.x>.body.wide{padding:0 20px 0 60px}
 .x>.body:after{content:"";display:block;clear:both}
 .x>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 30px -100%}
 .x>.body>.content>*:first-child{margin-top:0}
 .x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0;background:#f4f4f4;box-shadow:2px 0 4px #ddd}
+.x>.body.wide>.gnb{width:36px;margin:0 -36px 0 0;left:-60px;position:fixed;top:73px;left:10px}
 @media all and (max-width:980px){
-.x>.body{padding:0}
+.x>.body,
+.x>.body.wide{padding:0}
 .x>.body>.content{width:auto;padding:1px 10px 0 10px;float:none;margin:0 0 30px 0}
-.x>.body>.gnb{float:none;width:auto;margin-right:0;left:0;border-radius:0}
+.x>.body>.gnb,
+.x>.body.wide>.gnb{float:none;width:auto;margin-right:0;left:0;border-radius:0;position:relative;top:auto;left:auto}
 }
-
 /* Header */
 .x>.header>h1{margin:0 15px 0 0;float:left;text-shadow:0 1px 0 #fff}
 .x>.header>h1>a{text-decoration:none;color:#333;font-size:24px;line-height:40px;font-family:Arial, Helvetica, sans-serif}
@@ -79,7 +82,9 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.header>.account>ul>li>a:focus{text-decoration:underline}
 .x>.header>.account .lang+#lang{position:absolute;top:20px;left:auto;right:0;min-width:0}
 @media all and (max-width:480px){
-.x>.header>.site,
+.x>.header>.site{margin-top:0}
+}
+@media all and (max-width:980px){
 .x>.header>.account{margin-top:0}
 }
 /* Footer */
@@ -91,9 +96,18 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.footer .vr{color:#ccc !important}
 /* GNB */
 .x>.body>.gnb>.close{background:none;border:0;position:absolute;top:0;left:0;width:100%;height:1px;overflow:hidden;margin:0;padding:0}
-.x>.body>.gnb ul{margin:0 0 15px 0;padding:0;list-style:none}
-.x>.body>.gnb>ul{box-shadow:0 2px 4px #ddd}
+.x>.body>.gnb ul{margin:0;padding:0;list-style:none}
+.x>.body>.gnb>ul{position:relative;z-index:1;box-shadow:0 2px 4px #ddd}
 .x>.body>.gnb a{text-decoration:none;text-shadow:0 1px 0 #fff;color:#000;display:block}
+.x>.body>.gnb>a[href="#gnbNav"]{display:none}
+@media all and (max-width:980px){
+.x>.body.mobile>.gnb>ul>li{display:none}
+.x>.body.mobile>.gnb>ul>li:first-child{display:block}
+.x>.body.mobile>.gnb.open>ul>li{display:block}
+.x>.body>.gnb>a[href="#gnbNav"]{display:block;position:absolute;z-index:2;top:0;right:0;line-height:37px;width:44px;white-space:nowrap;font-size:0;border-left:1px solid #ddd}
+.x>.body>.gnb>a[href="#gnbNav"]:before{content:"";position:absolute;width:1px;height:100%;border-left:1px solid #fff}
+.x>.body>.gnb>a>i{position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px}
+}
 	/* li */
 .x>.body>.gnb>ul>li{background:#94a55c;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
 .x>.body>.gnb>ul>li.active{background:#222}
@@ -101,7 +115,7 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li.active{border-bottom:0;padding:0 0 1px 0}
 	/* li>a */
 .x>.body>.gnb>ul>li>a{padding:8px 5px 8px 10px;background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,from(#F1F1F1),to(#E8E8E8));background:-moz-linear-gradient(top,#F1F1F1,#E8E8E8);background:-o-linear-gradient(top,#F1F1F1,#E8E8E8)}
-.x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:0 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
+.x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:-4px 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
 .x>.body>.gnb>ul>li>a[href$="module=admin"]:before{background-position:-432px 0}
 .x>.body>.gnb>ul>li>a[href*="act=dispMenuAdminSiteMap"]:before{background-position:0 -24px}
 .x>.body>.gnb>ul>li>a[href*="act=dispMemberAdminList"]:before{background-position:-168px 0}
@@ -116,12 +130,15 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#94a55c;background:-webkit-gradient(linear,left top,left bottom,from(#b3d155),to(#94a55c));background:-moz-linear-gradient(top,#b3d155,#94a55c);background:-o-linear-gradient(top,#b3d155,#94a55c)}
 .x>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
 	/* li>a>span */
+.x>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}
 .x>.body>.gnb>ul>li>a>.closeAll,
+.x>.body.wide>.gnb>ul>li.open>a>.closeAll,
 .x>.body>.gnb>ul>li.open>a>.openAll{display:none}
 .x>.body>.gnb>ul>li.open>a>.closeAll{display:inline}
 	/* li>ul */
 .x>.body>.gnb>ul>li>ul{display:none;margin:0 10px 10px 10px;border-radius:4px}
 .x>.body>.gnb>ul>li.open>ul{display:block}
+.x>.body.wide>.gnb>ul>li.open>ul{display:none}
 	/* li>ul>li */
 .x>.body>.gnb>ul>li>ul>li{border-top:1px solid #ddd;position:relative}
 .x>.body>.gnb>ul>li>ul>li:first-child{border:0}
@@ -136,6 +153,9 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 	/* li>ul>li>.action */
 .x>.body>.gnb>ul>li>ul>li>.remove{position:absolute;top:4px;right:5px}
 .x>.body>.gnb>ul>li>ul>li>.remove>.x_close{width:20px}
+@media all and (max-width:980px){
+.x>.body.wide>.gnb>ul>li>a>.tx{width:auto;height:auto}
+}
 /* Dashboard */
 .x .dashboard{zoom:1}
 .x .dashboard:after{content:"";display:block;clear:both}
diff --git a/modules/admin/tpl/css/admin.min.css b/modules/admin/tpl/css/admin.min.css
index 9501c448c..b1ff6222b 100644
--- a/modules/admin/tpl/css/admin.min.css
+++ b/modules/admin/tpl/css/admin.min.css
@@ -51,16 +51,19 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.header{border-radius:5px 5px 0 0;padding:10px 15px;zoom:1;border-bottom:1px solid #ddd;background:#f6f6f6;background:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#F1F1F1));background:-moz-linear-gradient(top,#F6F6F6,#F1F1F1);background:-o-linear-gradient(top,#F6F6F6,#F1F1F1)}
 .x>.header:after{content:"";display:block;clear:both}
 .x>.body{zoom:1;padding:0 20px 0 240px}
+.x>.body.wide{padding:0 20px 0 60px}
 .x>.body:after{content:"";display:block;clear:both}
 .x>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 30px -100%}
 .x>.body>.content>*:first-child{margin-top:0}
 .x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0;background:#f4f4f4;box-shadow:2px 0 4px #ddd}
+.x>.body.wide>.gnb{width:36px;margin:0 -36px 0 0;left:-60px;position:fixed;top:73px;left:10px}
 @media all and (max-width:980px){
-.x>.body{padding:0}
+.x>.body,
+.x>.body.wide{padding:0}
 .x>.body>.content{width:auto;padding:1px 10px 0 10px;float:none;margin:0 0 30px 0}
-.x>.body>.gnb{float:none;width:auto;margin-right:0;left:0;border-radius:0}
+.x>.body>.gnb,
+.x>.body.wide>.gnb{float:none;width:auto;margin-right:0;left:0;border-radius:0;position:relative;top:auto;left:auto}
 }
-
 /* Header */
 .x>.header>h1{margin:0 15px 0 0;float:left;text-shadow:0 1px 0 #fff}
 .x>.header>h1>a{text-decoration:none;color:#333;font-size:24px;line-height:40px;font-family:Arial, Helvetica, sans-serif}
@@ -79,7 +82,9 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.header>.account>ul>li>a:focus{text-decoration:underline}
 .x>.header>.account .lang+#lang{position:absolute;top:20px;left:auto;right:0;min-width:0}
 @media all and (max-width:480px){
-.x>.header>.site,
+.x>.header>.site{margin-top:0}
+}
+@media all and (max-width:980px){
 .x>.header>.account{margin-top:0}
 }
 /* Footer */
@@ -91,9 +96,18 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.footer .vr{color:#ccc !important}
 /* GNB */
 .x>.body>.gnb>.close{background:none;border:0;position:absolute;top:0;left:0;width:100%;height:1px;overflow:hidden;margin:0;padding:0}
-.x>.body>.gnb ul{margin:0 0 15px 0;padding:0;list-style:none}
-.x>.body>.gnb>ul{box-shadow:0 2px 4px #ddd}
+.x>.body>.gnb ul{margin:0;padding:0;list-style:none}
+.x>.body>.gnb>ul{position:relative;z-index:1;box-shadow:0 2px 4px #ddd}
 .x>.body>.gnb a{text-decoration:none;text-shadow:0 1px 0 #fff;color:#000;display:block}
+.x>.body>.gnb>a[href="#gnbNav"]{display:none}
+@media all and (max-width:980px){
+.x>.body.mobile>.gnb>ul>li{display:none}
+.x>.body.mobile>.gnb>ul>li:first-child{display:block}
+.x>.body.mobile>.gnb.open>ul>li{display:block}
+.x>.body>.gnb>a[href="#gnbNav"]{display:block;position:absolute;z-index:2;top:0;right:0;line-height:37px;width:44px;white-space:nowrap;font-size:0;border-left:1px solid #ddd}
+.x>.body>.gnb>a[href="#gnbNav"]:before{content:"";position:absolute;width:1px;height:100%;border-left:1px solid #fff}
+.x>.body>.gnb>a>i{position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px}
+}
 	/* li */
 .x>.body>.gnb>ul>li{background:#94a55c;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
 .x>.body>.gnb>ul>li.active{background:#222}
@@ -101,7 +115,7 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li.active{border-bottom:0;padding:0 0 1px 0}
 	/* li>a */
 .x>.body>.gnb>ul>li>a{padding:8px 5px 8px 10px;background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,from(#F1F1F1),to(#E8E8E8));background:-moz-linear-gradient(top,#F1F1F1,#E8E8E8);background:-o-linear-gradient(top,#F1F1F1,#E8E8E8)}
-.x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:0 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
+.x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:-4px 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
 .x>.body>.gnb>ul>li>a[href$="module=admin"]:before{background-position:-432px 0}
 .x>.body>.gnb>ul>li>a[href*="act=dispMenuAdminSiteMap"]:before{background-position:0 -24px}
 .x>.body>.gnb>ul>li>a[href*="act=dispMemberAdminList"]:before{background-position:-168px 0}
@@ -116,12 +130,15 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#94a55c;background:-webkit-gradient(linear,left top,left bottom,from(#b3d155),to(#94a55c));background:-moz-linear-gradient(top,#b3d155,#94a55c);background:-o-linear-gradient(top,#b3d155,#94a55c)}
 .x>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
 	/* li>a>span */
+.x>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}
 .x>.body>.gnb>ul>li>a>.closeAll,
+.x>.body.wide>.gnb>ul>li.open>a>.closeAll,
 .x>.body>.gnb>ul>li.open>a>.openAll{display:none}
 .x>.body>.gnb>ul>li.open>a>.closeAll{display:inline}
 	/* li>ul */
 .x>.body>.gnb>ul>li>ul{display:none;margin:0 10px 10px 10px;border-radius:4px}
 .x>.body>.gnb>ul>li.open>ul{display:block}
+.x>.body.wide>.gnb>ul>li.open>ul{display:none}
 	/* li>ul>li */
 .x>.body>.gnb>ul>li>ul>li{border-top:1px solid #ddd;position:relative}
 .x>.body>.gnb>ul>li>ul>li:first-child{border:0}
@@ -136,6 +153,9 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 	/* li>ul>li>.action */
 .x>.body>.gnb>ul>li>ul>li>.remove{position:absolute;top:4px;right:5px}
 .x>.body>.gnb>ul>li>ul>li>.remove>.x_close{width:20px}
+@media all and (max-width:980px){
+.x>.body.wide>.gnb>ul>li>a>.tx{width:auto;height:auto}
+}
 /* Dashboard */
 .x .dashboard{zoom:1}
 .x .dashboard:after{content:"";display:block;clear:both}
diff --git a/modules/admin/tpl/js/admin.js b/modules/admin/tpl/js/admin.js
index 6d794a5a1..b6c773336 100644
--- a/modules/admin/tpl/js/admin.js
+++ b/modules/admin/tpl/js/admin.js
@@ -39,18 +39,19 @@ jQuery(function($){
 	var $xGnb_li = $xGnb.find('>ul>li');
 	$(window).resize(function(){
 		setTimeout(function(){
-			if($(window).width() >= 980){ // Over than 1024px
-				$xGnb.height('auto').height($xBody.height());
-			} else { // Less than 1024
-				$xGnb.height('auto');
+			if($(window).width() < 980 || $(window).width() > 1240){
+				$xBody.removeClass('wide');
+			} else {
+				$xBody.addClass('wide');
+			}
+			if($(window).width() < 980){
+				$xBody.addClass('mobile');
 			}
 		}, 100);
 	}).resize();
 // GNB Click toggle
-	// Add virtual class
-	$xGnb_li.find('>ul').prev('a').addClass('virtual');
 	// Virtual click
-	$xGnb_li.find('>a.virtual')
+	$xGnb_li.find('>a').not('[href="#gnb"]') //.virtual
 		.bind('click focus', function(){
 			var $this = $(this);
 			// Submenu toggle
@@ -58,6 +59,8 @@ jQuery(function($){
 				$xGnb_li.not($this.parent('li')).removeClass('open');
 				$(this).parent('li').toggleClass('open');
 			} 
+			$xGnb.trigger('mouseenter'); // GNB Hover
+			$(window).resize();
 			return false;
 		});
 	// Toggle all
@@ -70,5 +73,43 @@ jQuery(function($){
 				$xGnb_li.removeClass('open');
 				$xGnb.removeClass('all');
 			}
+		})
+		.focus(function(){
+			$xGnb.trigger('mouseenter'); // GNB Hover
 		});
+// GNB Hover toggle
+	function contentBugFix(){ // Chrome browser rendering bug fix
+		$xContent.width('99.99%');
+		setTimeout(function(){
+			$xContent.removeAttr('style');
+		}, 0);
+	}
+	$xGnb
+		.mouseenter(function(){ // Mouseenter
+			if($(window).width() >= 980){
+				setTimeout(function(){
+					$xBody.removeClass('wide');
+					contentBugFix();
+				}, 200);
+			}
+		})
+		.mouseleave(function(){ // Mouseleave
+			if($(window).width() >= 980 && $(window).width() < 1240){
+				$xBody.addClass('wide');
+				contentBugFix();
+			}
+		});
+// GNB Mobile Toggle
+	$xGnb.find('>a[href="#gnbNav"]').click(function(){
+		$(this).parent('.gnb').toggleClass('open');
+		return false;
+	});
+// GNB Close
+	$xGnb
+		.prepend('<button type="button" class="close before" />')
+		.append('<button type="button" class="close after" />');
+	$xGnb.find('>.close').focus(function(){
+		$xBody.addClass('wide');
+		contentBugFix();
+	});
 });
\ No newline at end of file
diff --git a/modules/admin/tpl/js/admin.min.js b/modules/admin/tpl/js/admin.min.js
index ea25e5b9d..b6c773336 100644
--- a/modules/admin/tpl/js/admin.min.js
+++ b/modules/admin/tpl/js/admin.min.js
@@ -1,3 +1,115 @@
-jQuery(function(a){window.top.scrollTo(0,0);a(".x .skipNav>a").click(function(){a(a(this).attr("href")).attr("tabindex","0").css("outline","0").focus()});var d=a(".x .x_tabbable");d.find('.x_tab-pane:not(".x_active")').hide();d.find(".x_nav-tabs>li>a").click(function(){var b=a(this);b.parent("li").addClass("x_active").siblings().removeClass("x_active");d.find(b.attr("href")).addClass("x_active").show().siblings().removeClass("x_active").hide();return!1});var e=a(".x>.body");e.find(">.content");var b=
-e.find(">.gnb"),c=b.find(">ul>li");a(window).resize(function(){setTimeout(function(){980<=a(window).width()?b.height("auto").height(e.height()):b.height("auto")},100)}).resize();c.find(">ul").prev("a").addClass("virtual");c.find(">a.virtual").bind("click focus",function(){var d=a(this);b.hasClass("all")||(c.not(d.parent("li")).removeClass("open"),a(this).parent("li").toggleClass("open"));return!1});c.find('>a[href="#gnb"]').click(function(){b.hasClass("all")?(c.removeClass("open"),b.removeClass("all")):
-(c.addClass("open"),b.addClass("all"))})});
+/* NHN (developers@xpressengine.com) */
+jQuery(function($){
+// iSO mobile device toolbar remove
+	window.top.scrollTo(0,0);
+// Skip to content
+	$('.x .skipNav>a').click(function(){
+		$($(this).attr('href')).attr('tabindex','0').css('outline','0').focus();
+	});
+	/*
+// TARGET toggle
+	$('.x [data-toggle]').click(function(){
+		$($(this).attr('data-toggle')).toggle();
+		return false;
+	});
+// TARGET show
+	$('.x [data-show]').click(function(){
+		$($(this).attr('data-show')).show();
+		return false;
+	});
+// TARGET hide
+	$('.x [data-hide]').click(function(){
+		$($(this).attr('data-hide')).hide();
+		return false;
+	});
+	*/
+// Tab Navigation
+	var $tabbable = $('.x .x_tabbable');
+	$tabbable.find('.x_tab-pane:not(".x_active")').hide();
+	$tabbable.find('.x_nav-tabs>li>a').click(function(){
+		var $this = $(this);
+		$this.parent('li').addClass('x_active').siblings().removeClass('x_active');
+		$tabbable.find($this.attr('href')).addClass('x_active').show().siblings().removeClass('x_active').hide();
+		return false;
+	});
+// GNB Height 100%
+	var $xBody = $('.x>.body');
+	var $xContent = $xBody.find('>.content');
+	var $xGnb = $xBody.find('>.gnb');
+	var $xGnb_li = $xGnb.find('>ul>li');
+	$(window).resize(function(){
+		setTimeout(function(){
+			if($(window).width() < 980 || $(window).width() > 1240){
+				$xBody.removeClass('wide');
+			} else {
+				$xBody.addClass('wide');
+			}
+			if($(window).width() < 980){
+				$xBody.addClass('mobile');
+			}
+		}, 100);
+	}).resize();
+// GNB Click toggle
+	// Virtual click
+	$xGnb_li.find('>a').not('[href="#gnb"]') //.virtual
+		.bind('click focus', function(){
+			var $this = $(this);
+			// Submenu toggle
+			if(!$xGnb.hasClass('all')) { 
+				$xGnb_li.not($this.parent('li')).removeClass('open');
+				$(this).parent('li').toggleClass('open');
+			} 
+			$xGnb.trigger('mouseenter'); // GNB Hover
+			$(window).resize();
+			return false;
+		});
+	// Toggle all
+	$xGnb_li.find('>a[href="#gnb"]')
+		.click(function(){
+			if(!$xGnb.hasClass('all')){ // Open All
+				$xGnb_li.addClass('open');
+				$xGnb.addClass('all');
+			} else { // Close All
+				$xGnb_li.removeClass('open');
+				$xGnb.removeClass('all');
+			}
+		})
+		.focus(function(){
+			$xGnb.trigger('mouseenter'); // GNB Hover
+		});
+// GNB Hover toggle
+	function contentBugFix(){ // Chrome browser rendering bug fix
+		$xContent.width('99.99%');
+		setTimeout(function(){
+			$xContent.removeAttr('style');
+		}, 0);
+	}
+	$xGnb
+		.mouseenter(function(){ // Mouseenter
+			if($(window).width() >= 980){
+				setTimeout(function(){
+					$xBody.removeClass('wide');
+					contentBugFix();
+				}, 200);
+			}
+		})
+		.mouseleave(function(){ // Mouseleave
+			if($(window).width() >= 980 && $(window).width() < 1240){
+				$xBody.addClass('wide');
+				contentBugFix();
+			}
+		});
+// GNB Mobile Toggle
+	$xGnb.find('>a[href="#gnbNav"]').click(function(){
+		$(this).parent('.gnb').toggleClass('open');
+		return false;
+	});
+// GNB Close
+	$xGnb
+		.prepend('<button type="button" class="close before" />')
+		.append('<button type="button" class="close after" />');
+	$xGnb.find('>.close').focus(function(){
+		$xBody.addClass('wide');
+		contentBugFix();
+	});
+});
\ No newline at end of file
diff --git a/modules/menu/tpl/site_design.html b/modules/menu/tpl/site_design.html
index a47e4919d..d5d1fd182 100644
--- a/modules/menu/tpl/site_design.html
+++ b/modules/menu/tpl/site_design.html
@@ -1,6 +1,3 @@
-<div class="x_page-header">
-	<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
-</div>
 <div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 	<p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
@@ -174,7 +171,8 @@
 </div>
 <style>
 /* Site */
-#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
+.x>.body>.content{margin-bottom:0}
+#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap;margin-top:10px}
 #site .btnBoth,
 #site .x_btn-group{text-align:right;padding:10px 0;margin:15px 0;border-top:1px solid #ccc}
 #site .btnBoth:after{content:"";display:block;clear:both}
@@ -286,7 +284,7 @@ jQuery(function($){
 // Set #site height fix
 	$(window).resize(function(){
 		var wHeigh = $(window).height();
-		$('#site').height(wHeigh - 270).children('.col').height(wHeigh - 315);
+		$('#site').height(wHeigh - 150).children('.col').height(wHeigh - 195);
 	}).resize();
 // Navigation a active/inactive
 	var $navAnchor = $('a>i.x_icon-circle-arrow-right').parent('a');
diff --git a/modules/menu/tpl/sitemap.html b/modules/menu/tpl/sitemap.html
index 9d099b877..f098bbb27 100644
--- a/modules/menu/tpl/sitemap.html
+++ b/modules/menu/tpl/sitemap.html
@@ -5,10 +5,6 @@
 <load target="./js/jquery.scrollTo-1.4.2.js" />
 
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
-
-<div class="x_page-header">
-	<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
-</div>
 <div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 	<p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
@@ -478,7 +474,8 @@
 </div>
 <style>
 /* Site */
-#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
+.x>.body>.content{margin-bottom:0}
+#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap;margin-top:10px}
 #site .btnBoth,
 #site .x_btn-group{text-align:right;padding:10px 0;margin:15px 0;border-top:1px solid #ccc}
 #site .btnBoth:after{content:"";display:block;clear:both}
@@ -498,15 +495,16 @@
 .mapi>ul{padding:1px}
 	/* Root */
 .mapi>ul>li{margin-top:30px;position:relative}
-.mapi>ul>li:before{ content:"";display:block;border-top:1px dashed #ccc;position:relative;top:-15px}
+.mapi>ul>li:before{content:"";display:block;border-top:1px dashed #ccc;position:relative;top:-15px}
 .mapi>ul>li:first-child{margin-top:0}
-.mapi>ul>li:first-child:before{ content:normal}
+.mapi>ul>li:first-child:before{content:normal}
 .mapi>ul>li>a{font-weight:bold}
 .mapi>ul>li>ul{border-top:2px solid #666;margin-top:7px;padding-top:7px}
 	/* li>a */
-.mapi li>a{border:0 !important; padding:0 8px !important; margin:0 60px 0 0; border-radius:3px; position:relative;z-index:2;height:23px;line-height:23px;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
+.mapi li>a{border:0 !important;padding:0 8px !important;margin:0 60px 1px 0;border-radius:3px;position:relative;z-index:2;height:23px;line-height:23px;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
 .mapi .x_icon-home{opacity:.5;filter:alpha(opacity=50)}
-.mapi .jstree-hovered>.x_icon-home{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
+.mapi .jstree-hovered>.x_icon-home,
+.mapi .jstree-clicked>.x_icon-home{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
 	/* li>.side */
 .mapi .side{position:absolute;z-index:2;top:0;right:0;line-height:0}
 .mapi .side>button{border:0;border-radius:3px;width:23px;height:23px;overflow:hidden;font-size:0;line-height:0;text-indent:24px;background:url({getUrl('')}common/img/glyphicons-halflings.png) no-repeat;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
@@ -531,10 +529,10 @@
 .col .nav li>a:hover>i,
 .col .nav li>a:focus>i,
 .col .nav li.active>a>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);background-repeat:no-repeat;opacity:1;filter:alpha(opacity=100)}
-.col input[type="file"]{ width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;opacity:0;filter:alpha(opacity=0)}
+.col input[type="file"]{width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;opacity:0;filter:alpha(opacity=0)}
 /* Download */
 .download.col{max-width:600px}
-.download .list{padding:1px 0;border-bottom:1px solid #ccc;}
+.download .list{padding:1px 0;border-bottom:1px solid #ccc}
 .download .item{border-top:1px solid #ddd;padding:1px 0 1px 95px;position:relative}
 .download .item:first-child{border:0}
 .download .item>img{position:absolute;top:15px;left:0;width:80px;height:80px}
@@ -550,7 +548,7 @@
 .theme label>a:hover,
 .theme label>a:focus{background-color:#000;background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png)}
 .theme h2{font-size:14px;border-bottom:1px solid #ddd;margin:0;padding:15px 0 8px 0}
-.theme ul button{background-color:transparent;border:0;padding:0;margin:0;overflow:visible;}
+.theme ul button{background-color:transparent;border:0;padding:0;margin:0;overflow:visible}
 .theme ul{margin:0;padding:0;list-style:none}
 .theme li{zoom:1}
 .theme li:after{content:"";display:block;clear:both}
@@ -567,7 +565,7 @@
 .theme ul ul>li>*:focus{background:#666;color:#fff}
 .theme ul ul>li>a:hover>i,
 .theme ul ul>li>a:focus>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png)}
-.theme ul ul>li>button{width:100%;}
+.theme ul ul>li>button{width:100%}
 /* Properties */
 #properties ul{margin:8px 0 0 0;padding:0 0 8px 0;border-bottom:1px solid #ddd}
 #properties li{position:relative;white-space:nowrap}
@@ -614,7 +612,7 @@
 #imgbtn figure{margin:0}
 #imgbtn figcaption{font-weight:bold}
 #imgbtn p{margin:0}
-#imgbtn .btnBoth{ border-top:0;border-bottom:1px solid #ddd;margin-top:0;padding-bottom:28px}
+#imgbtn .btnBoth{border-top:0;border-bottom:1px solid #ddd;margin-top:0;padding-bottom:28px}
 /* Design */
 #design ul{margin-top:8px}
 #design .btnBoth{border:0;margin-top:0}
@@ -992,7 +990,7 @@ jQuery(function($){
 // Set #site height fix
 	$(window).resize(function(){
 		var wHeigh = $(window).height();
-		$('#site').height(wHeigh - 270).children('.col').height(wHeigh - 315);
+		$('#site').height(wHeigh - 150).children('.col').height(wHeigh - 195);
 	}).resize();
 // #linkMenu copy and set text to input
 setTimeout(function(){