Support language select

This commit is contained in:
MinSoo Kim 2016-09-05 19:54:21 +09:00
parent 8aaae59b80
commit 1d52f91cdf
4 changed files with 97 additions and 9 deletions

View file

@ -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">

View file

@ -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>

View file

@ -2,13 +2,13 @@ $(function() {
"use strict";
var menu_width = function() {
if($('.layout_menu>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());
if($('#layout_gnb>ul>li:first-child').width() > 50) {
$('#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();
});
});

View file

@ -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;