Support language select

layouts/simple_world/conf/info.xml

@@ -12,9 +12,13 @@
 	</author>
 	<menus>
 		<menu name="GNB" maxdepth="2" default="true">
-			<title xml:lang="ko">사이트 중심 메뉴</title>
+			<title xml:lang="ko">상단 메뉴</title>
 			<title xml:lang="en">Global Navigation Menu</title>
 		</menu>
+		<menu name="FNB" maxdepth="1">
+			<title xml:lang="ko">하단 메뉴</title>
+			<title xml:lang="en">Footer Navigation Menu</title>
+		</menu>
 	</menus>
 	<extra_vars>
 		<var name="LOGO_IMG" type="image">

layouts/simple_world/layout.html

@@ -121,7 +121,23 @@
 		</div>
 	</div>
 	<footer class="layout_footer">
+		<!-- Footer Menu -->
+		<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
+			<ul>
+				<li loop="$FNB->list=>$key1,$val1" class="footer_menu">
+					<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a>
+				</li>
+			</ul>
+		</nav>
+		<!--// Footer Menu -->
 		<p cond="!$layout_info->FOOTER">Powered by <a href="https://www.rhymix.org/">Rhymix</a>.</p>
 		<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
+		<!-- Language -->
+		<div class="language" cond="count($lang_supported) > 0">
+			<button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button>
+			<ul class="selectLang">
+				<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
+			</ul>
+		</div>
 	</footer>
 </div>

layouts/simple_world/layout.js

@@ -2,13 +2,13 @@ $(function() {
 	"use strict";
 
 	var menu_width = function() {
-		if($('.layout_menu>ul>li:first-child').width() > 50) {
+		if($('#layout_gnb>ul>li:first-child').width() > 50) {
-			$('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width());
+			$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width());
 		}
 	}
 
 	$( window ).resize(function() {
-		if($('.layout_menu>ul>li:first-child').width() > 50) {
+		if($('#layout_gnb>ul>li:first-child').width() > 50) {
 			menu_width();
 		}
 	});
@@ -32,7 +32,7 @@ $(function() {
 			obj.classList.remove("is-active");
 		}
 		else {
-			$('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
+			$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
 			var targetMenu = $(obj).attr('data-target');
 			$('#' + targetMenu).slideDown('300');
 
@@ -47,4 +47,8 @@ $(function() {
 		});
 	}
 
+	// Language Select
+	$('.language>.toggle').click(function(){
+		$('.selectLang').toggle();
+	});
 });

layouts/simple_world/layout.scss

@@ -206,7 +206,7 @@ body {
 	float: left;
 }
 
-.layout_menu>ul>li:first-child {
+#layout_gnb>ul>li:first-child {
 	float: right;
 
 }
@@ -231,7 +231,10 @@ body {
 .layout_menu li a:active,
 .layout_dropdown:hover .dropbtn,
 .layout_dropdown:focus .dropbtn,
-.layout_dropdown:active .dropbtn {
+.layout_dropdown:active .dropbtn,
+.language li:hover button,
+.language li:focus button,
+.language li:active button {
 	background-color: $primary-color;
 	color: layoutGrayContrast($primary-color, 0.710);
 }
@@ -248,7 +251,6 @@ body {
 	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
 
-
 .layout_menu .layout_dropdown-content a {
 	color: black;
 	padding: 12px 16px;
@@ -269,7 +271,59 @@ body {
 .layout_menu .layout_dropdown:hover .layout_dropdown-content {
 	display: block;
 }
+/* Language */
+.language{
+	display: inline-block;
+	width: 100%;
+	text-align: right;
+}
 
+.language ul::before {
+	content: "";
+	display: block;
+	clear: both;
+}
+.language ul {
+	display: none;
+	float:right;
+	width:120px;
+	clear:both;
+	margin: 0;
+	padding: 0;
+	z-index: 9999999;
+	box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
+}
+.language .toggle{
+	background:none;
+	display: block;
+	float: right;
+	width:120px;
+	border:0;
+	color:#fff;
+	cursor:pointer;
+	vertical-align:top;
+	text-align:right;
+	padding:0;
+	height:45px;
+}
+
+.language li{
+	list-style:none;
+	background: lighten($grey, 40%);
+}
+.language li button {
+	display:block;
+	color: black;
+	background: lighten($grey, 40%);
+	padding: 12px 16px;
+	text-decoration: none;
+	width: 100%;
+	display: block;
+	text-align: left;
+	box-sizing: border-box;
+	border:0;
+	cursor:pointer;
+}
 
 /* Hamberger menu http://callmenick.com/post/animating-css-only-hamburger-menu-icons Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php Copyright 2014, Call Me Nick http://callmenick.com */
 .layout_mobile_menu {
@@ -416,7 +470,7 @@ body {
 		background-color: lighten($grey, 31%);
 	}
 
-	.layout_menu>ul>li, .layout_menu>ul>li:first-child {
+	.layout_menu>ul>li, #layout_gnb>ul>li:first-child {
 		float: none;
 	}
 
@@ -461,6 +515,16 @@ body {
 		text-align: left;
 	}
 
+	.language ul {
+		display: none;
+		float:none;
+		width:100%;
+	}
+	.language .toggle{
+		display: block;
+		float: none;
+		width:100%;
+	}
 	/* PC only */
 	.layout_pc {
 		display: none;