Skip to content

Commit 72ec82b

Browse files
thvieira86thvieira86
committed
Alteração de seleção de idioma
1 parent f059cc1 commit 72ec82b

File tree

12 files changed

+208
-4
lines changed

12 files changed

+208
-4
lines changed

‎_site/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ <h1><a href="/" title="Coderockr"><img src="/public/images/coderockr-logo.png" w
5050
<span class="line3"></span>
5151
</label>
5252
</div>
53+
<label for="language"><span></span></label>
54+
<input type="checkbox" name="language" id="language" />
55+
<div class="language-pt">
56+
<div>
57+
<a href="http://coderockr.com" title="Acesse nosso site em Português" target="_top">PT</a>
58+
<a href="http://en.coderockr.com" title="Visit our site in English." target="_top">EN</a>
59+
</div>
60+
</div>
5361
</header>
5462

5563
<div id="main" role="main">

‎_site/public/images/content/home-casabrasil.jpg

-173 Bytes
Loading

‎_site/public/images/languages.png

2.33 KB
Loading

‎_site/public/scripts/script.js

+7
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,14 @@ $(document).ready(function() {
1818
$("#openmenu").attr("checked",false);
1919
$("html, body").animate({scrollTop: 0}, 1000);
2020
});
21+
$("#main, .bt-menu").click(function(){
22+
hideLanguage();
23+
});
2124

2225
$("#projetos > nav a").not("#projetos > nav.pages a").click(function(){
2326
$("#projetos > nav a").addClass("nonselect");
2427
$(this).removeClass("nonselect");
28+
hideLanguage();
2529
});
2630
$("#projetos > nav.pages ul").css({marginLeft:-(parseInt($("#projetos > nav.pages ul").width()/2))});
2731
$("#contato label").bind('click',function(){
@@ -109,6 +113,9 @@ $(document).ready(function() {
109113
}
110114
});
111115
});
116+
function hideLanguage() {
117+
$('input[name="language"]').attr('checked', false);
118+
}
112119
function orientation() {
113120
var height = $(window).height();
114121
var width = $(window).width();

‎_site/public/styles/style.css

+89-2
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,44 @@ nav#menu ul li a{
115115
text-transform: uppercase;
116116
text-shadow: none;
117117
}
118-
119118
nav#menu ul li a:hover, nav#menu ul li a.active {
120119
color: #FFBC00;
121120
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
122121
}
122+
input[name="language"] {
123+
display: none;
124+
}
125+
header div[class^="language"] > div {
126+
background: #F8F8F8;
127+
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
128+
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
129+
box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
130+
padding: 10px;
131+
position: absolute;
132+
right: 0;
133+
top: 130px;
134+
}
135+
label[for="language"] {
136+
display: none;
137+
}
138+
header div[class^="language"] a {
139+
color: #21508B;
140+
display: block;
141+
padding: 6px 4px;
142+
text-align: center;
143+
}
144+
header div[class^="language"] a:first-child {
145+
border-bottom: 1px solid rgba(0,0,0,0.2);
146+
}
147+
header div[class^="language"] a:hover {
148+
color: #CDA827;
149+
}
150+
header div[class="language-pt"] a:first-child, header div[class="language-en"] a:last-child {
151+
cursor: default;
152+
color: #CDA827;
153+
font-weight: 700;
154+
}
155+
123156
.tapoverlay {
124157
display: none;
125158
}
@@ -874,7 +907,8 @@ nav#menu ul li a, nav#menu ul li a:hover,
874907
-ms-transition: all 0.3s linear;
875908
transition: all 0.3s linear;
876909
}
877-
header, nav, label[for="openmenu"], #main {
910+
header, nav, label[for="openmenu"], #main,
911+
header div[class^="language"] > div {
878912
-webkit-transition: all 0.3s ease-in-out;
879913
-moz-transition: all 0.3s ease-in-out;
880914
-o-transition: all 0.3s ease-in-out;
@@ -911,6 +945,7 @@ header, nav, label[for="openmenu"], #main {
911945
header h1{
912946
margin-left: 15px;
913947
}
948+
914949
#home nav {
915950
background-position: 0 194px;
916951
height: inherit;
@@ -1062,6 +1097,58 @@ header, nav, label[for="openmenu"], #main {
10621097
header .bt-menu span.line3 {
10631098
top: 29px;
10641099
}
1100+
1101+
header div[class^="language"] {
1102+
height: 120px;
1103+
overflow: hidden;
1104+
position: absolute;
1105+
right: 0;
1106+
top: 61px;
1107+
width: 78px;
1108+
}
1109+
header div[class^="language"] > div {
1110+
background: #20477E;
1111+
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1112+
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1113+
box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1114+
padding: 0;
1115+
right: 5px;
1116+
top: -120px;
1117+
}
1118+
header input[name="language"]:checked + div[class^="language"] > div {
1119+
top: 0;
1120+
}
1121+
label[for="language"] {
1122+
display: block;
1123+
position: absolute;
1124+
right: 6px;
1125+
top: 1px;
1126+
}
1127+
label[for="language"] span {
1128+
background: url("../images/languages.png") 50% 50% no-repeat;
1129+
background-size: 40px 40px;
1130+
display: block;
1131+
height: 58px;
1132+
width: 54px;
1133+
}
1134+
header div[class^="language"] a {
1135+
color: #FFF;
1136+
font-size: 1.4em;
1137+
padding: 15px 20px;
1138+
text-align: center;
1139+
}
1140+
header div[class^="language"] a:first-child {
1141+
border-bottom: 1px solid rgba(0,0,0,0.4);
1142+
}
1143+
header div[class^="language"] a:hover {
1144+
color: #CDA827;
1145+
}
1146+
header div[class="language-pt"] a:first-child, header div[class="language-en"] a:last-child {
1147+
cursor: default;
1148+
color: #CDA827;
1149+
font-weight: 700;
1150+
}
1151+
10651152
nav#menu {
10661153
background: #0F1A2B;
10671154
bottom: 0;

‎index.html

+8
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,14 @@ <h1><a href="/" title="Coderockr"><img src="/public/images/coderockr-logo.png" w
5252
<span class="line3"></span>
5353
</label>
5454
</div>
55+
<label for="language"><span></span></label>
56+
<input type="checkbox" name="language" id="language" />
57+
<div class="language-pt">
58+
<div>
59+
<a href="http://coderockr.com" title="Acesse nosso site em Português" target="_top">PT</a>
60+
<a href="http://en.coderockr.com" title="Visit our site in English." target="_top">EN</a>
61+
</div>
62+
</div>
5563
</header>
5664

5765
<div id="main" role="main">

‎public/images/.DS_Store

15 KB
Binary file not shown.

‎public/images/content/.DS_Store

15 KB
Binary file not shown.

‎public/images/content/home-casabrasil.jpg

-173 Bytes
Loading

‎public/images/languages.png

2.33 KB
Loading

‎public/scripts/script.js

+7
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,14 @@ $(document).ready(function() {
1818
$("#openmenu").attr("checked",false);
1919
$("html, body").animate({scrollTop: 0}, 1000);
2020
});
21+
$("#main, .bt-menu").click(function(){
22+
hideLanguage();
23+
});
2124

2225
$("#projetos > nav a").not("#projetos > nav.pages a").click(function(){
2326
$("#projetos > nav a").addClass("nonselect");
2427
$(this).removeClass("nonselect");
28+
hideLanguage();
2529
});
2630
$("#projetos > nav.pages ul").css({marginLeft:-(parseInt($("#projetos > nav.pages ul").width()/2))});
2731
$("#contato label").bind('click',function(){
@@ -109,6 +113,9 @@ $(document).ready(function() {
109113
}
110114
});
111115
});
116+
function hideLanguage() {
117+
$('input[name="language"]').attr('checked', false);
118+
}
112119
function orientation() {
113120
var height = $(window).height();
114121
var width = $(window).width();

‎public/styles/style.css

+89-2
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,44 @@ nav#menu ul li a{
115115
text-transform: uppercase;
116116
text-shadow: none;
117117
}
118-
119118
nav#menu ul li a:hover, nav#menu ul li a.active {
120119
color: #FFBC00;
121120
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
122121
}
122+
input[name="language"] {
123+
display: none;
124+
}
125+
header div[class^="language"] > div {
126+
background: #F8F8F8;
127+
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
128+
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
129+
box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
130+
padding: 10px;
131+
position: absolute;
132+
right: 0;
133+
top: 130px;
134+
}
135+
label[for="language"] {
136+
display: none;
137+
}
138+
header div[class^="language"] a {
139+
color: #21508B;
140+
display: block;
141+
padding: 6px 4px;
142+
text-align: center;
143+
}
144+
header div[class^="language"] a:first-child {
145+
border-bottom: 1px solid rgba(0,0,0,0.2);
146+
}
147+
header div[class^="language"] a:hover {
148+
color: #CDA827;
149+
}
150+
header div[class="language-pt"] a:first-child, header div[class="language-en"] a:last-child {
151+
cursor: default;
152+
color: #CDA827;
153+
font-weight: 700;
154+
}
155+
123156
.tapoverlay {
124157
display: none;
125158
}
@@ -874,7 +907,8 @@ nav#menu ul li a, nav#menu ul li a:hover,
874907
-ms-transition: all 0.3s linear;
875908
transition: all 0.3s linear;
876909
}
877-
header, nav, label[for="openmenu"], #main {
910+
header, nav, label[for="openmenu"], #main,
911+
header div[class^="language"] > div {
878912
-webkit-transition: all 0.3s ease-in-out;
879913
-moz-transition: all 0.3s ease-in-out;
880914
-o-transition: all 0.3s ease-in-out;
@@ -911,6 +945,7 @@ header, nav, label[for="openmenu"], #main {
911945
header h1{
912946
margin-left: 15px;
913947
}
948+
914949
#home nav {
915950
background-position: 0 194px;
916951
height: inherit;
@@ -1062,6 +1097,58 @@ header, nav, label[for="openmenu"], #main {
10621097
header .bt-menu span.line3 {
10631098
top: 29px;
10641099
}
1100+
1101+
header div[class^="language"] {
1102+
height: 120px;
1103+
overflow: hidden;
1104+
position: absolute;
1105+
right: 0;
1106+
top: 61px;
1107+
width: 78px;
1108+
}
1109+
header div[class^="language"] > div {
1110+
background: #20477E;
1111+
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1112+
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1113+
box-shadow: 1px 2px 4px rgba(0,0,0,0.45);
1114+
padding: 0;
1115+
right: 5px;
1116+
top: -120px;
1117+
}
1118+
header input[name="language"]:checked + div[class^="language"] > div {
1119+
top: 0;
1120+
}
1121+
label[for="language"] {
1122+
display: block;
1123+
position: absolute;
1124+
right: 6px;
1125+
top: 1px;
1126+
}
1127+
label[for="language"] span {
1128+
background: url("../images/languages.png") 50% 50% no-repeat;
1129+
background-size: 40px 40px;
1130+
display: block;
1131+
height: 58px;
1132+
width: 54px;
1133+
}
1134+
header div[class^="language"] a {
1135+
color: #FFF;
1136+
font-size: 1.4em;
1137+
padding: 15px 20px;
1138+
text-align: center;
1139+
}
1140+
header div[class^="language"] a:first-child {
1141+
border-bottom: 1px solid rgba(0,0,0,0.4);
1142+
}
1143+
header div[class^="language"] a:hover {
1144+
color: #CDA827;
1145+
}
1146+
header div[class="language-pt"] a:first-child, header div[class="language-en"] a:last-child {
1147+
cursor: default;
1148+
color: #CDA827;
1149+
font-weight: 700;
1150+
}
1151+
10651152
nav#menu {
10661153
background: #0F1A2B;
10671154
bottom: 0;

0 commit comments

Comments
 (0)