How to create option language two
1 . index.html
<!DOCTYPE >
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="example" style="text-align: center;">
<div id="content">
<div class="lang_switcher">
<button id="en" class="lang">EN</button>
<button id="kh" class="lang">KH</button>
</div>
<div style="clear:both;"></div>
<!-- nav menu start -->
<ul id="nav">
<li><a href="#nogo" key="home" class="tr">Home</a></li>
<li><a href="#nogo" key="peoples" class="tr">Peoples </a></li>
<li><a href="#nogo" key="articles" class="tr">Articles</a></li>
<li><a href="#nogo" key="contact_us" class="tr">Contact us</a></li>
</ul>
<!-- nav menu end -->
<div style="clear:both;"></div>
<h2 key="welcome" class="tr">Welcome</h2>
<hr />
</div>
</div>
</body>
</html>
2 . js/jquery.min.js
we must download
3 . js/main.js
// preparing language file
var aLangKeys=new Array();
aLangKeys['en']=new Array();
aLangKeys['kh']=new Array();
aLangKeys['en']['home']='Home';
aLangKeys['en']['peoples']='Peoples ';
aLangKeys['en']['articles']='Articles';
aLangKeys['en']['contact_us']='Contact us';
aLangKeys['en']['welcome']='Welcome ';
aLangKeys['kh']['home']='ទំព័រដើម';
aLangKeys['kh']['peoples']='ប្រជាជន';
aLangKeys['kh']['articles']='អត្ថបទ';
aLangKeys['kh']['contact_us']='ទាក់ទងមកពួកយើង';
aLangKeys['kh']['welcome']='សូមស្វាគមន៍';
$(document).ready(function() {
// onclick behavior
$('.lang').click( function() {
var lang = $(this).attr('id'); // obtain language id
// translate all translatable elements
$('.tr').each(function(i){
$(this).text(aLangKeys[lang][ $(this).attr('key') ]);
});
} );
});
4 . css/main.css
body{
background:#eee;
font-family:Verdana, Helvetica, Arial, sans-serif;
padding-top:35px;
padding-left: 20%;
}
.example{
width:500px;
height:500px;
font-size:80%;
border:1px #000 solid;
margin:0.5em 10% 0.5em;
padding:1em 2em 2em;-moz-border-radius:3px;
-webkit-border-radius:3px
}
.lang_switcher{
float:right;
overflow:hidden;}
/* nav menu styles */
#nav,#nav ul{
list-style:none;font:10px verdana, sans-serif;
border:1px solid #000;
background:#fff;
position:relative;
font-size: 16px;
z-index:200;border-color:#eca #b97 #a86 #edb;
border-width:1px 2px 2px 1px;
margin:0;
padding:0 0 5px
}
#nav{height:25px;
padding:0
}
#nav table{
border-collapse:collapse
}
#nav li{
float:left;
padding:0 20px 0 10px
}
#nav li li{
float:none
}
#nav li a li{
float:left
}
#nav li a{
display:block;
float:left;
color:#888;
height:25px;
padding-right:5px;
line-height:25px;
text-decoration:none;
white-space:nowrap
}
#nav li li a{
height:20px;
line-height:20px;
float:none}
#nav li:hover{
position:relative;
z-index:300;
background:#fff}
#nav a:hover{position:relative;
z-index:300;
text-decoration:underline;
color:#b75}
#nav :hover ul{
left:0;
top:22px}
#nav a:hover ul{
left:-10px
}
#nav li:hover li:hover > ul{
left:-15px;
margin-left:100%;
top:-1px
}
#nav li:hover > ul ul{
position:absolute;
left:-9999px;
top:-9999px;
width:auto}
#nav li:hover > a{
text-decoration:underline;
color:#b75}
#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul{
left:100%;
top:-1px
}
#nav ul,#nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul{
position:absolute;
left:-9999px;
top:-9999px
}
0 Comments
CAN FEEDBACK
Emoji