How to i make my own Language Menu that is functional with JavaScript HTML And CSS?
- markcholloway0304
- Jul 28, 2023
- 2 min read
Updated: Jul 30, 2023
Soo... how do i make my own functional Language Menu... at Coding?
The following languages you need:
HTML
CSS
JavaScript
And also, you really need to take this for your skills!
Now let's start with HTML.
We need is our content from our Webpage that we want to put our language at.
Like, here's an example!
<html>
<head>
<meta charset="UTF-16">
<meta charset="UTF-8">
<title id="title">My Website</title>
</head>
<body>
<h1 id="heading">Hello world!</h1>
<p id="sentence">Look at my lovely picture!</p>
<img src="lovelypicture.png">
<p id="label">Description:</p>
<p id="description">It is a lovely picture who made Lorem ipsum, And this dummy text starts to be popular and famous since in the 1900's. The dummy text started like this "Lorem ipsum dolor amet". And in case you need to know, This is from Latin America (South america), From a Latin Langauge.</p>
<button id="option">I'm done Reading</button>
<img id="flag" src="america.png">
<div id="language" onclick="dropdown()">
<p id="languageSelectedLabel"></p>
</div>
<div id="dropdown">
<button id="english" onclick="us()"></button>
<button id="phillipines" onclick="tagalog()"></button>
</div>
</body>
</html>
You were wondering "Why do you have to put ID's mostly?
We will get to that later.
Next, CSS
Css is from style, but some people do it in another file, So let's put our CSS code!
background: black;
height: 50px;
width: 200px;
position: absolute;
top: 10px;
right: 50px;
color: white;
font-size: 35px;
font-family: Google Sans, sans-serif;
}
font-family: Google Sans, sans-serif;
background: black;
height: 350px;
width: 200px;
border-radius: 10px;
position: absolute;
top: 100px;
right: 50px;
color: white;
display: none;
}
#dropdown button {
background: transparent;
border: none;
color: white;
font-family: Google Sans, sans-serif;
font-size: 35px;
}
#flag {
height: 20px;
width: 50px;
position: absolute;
top: 60px;
right: 60px;
}
Next JS (JavaScript) (REMEMBER: THIS IS THE FINAL ONE, AND YOU ARE FINALLY DONE!!!):
var english = "EN";
var phillipines = "PH";
var japan = "JA";
document.getElementById("language").innerHTML = english;
document.getElementById("english").innerHTML = english;
document.getElementById("phillipines").innerHTML = phillipines;
function dropdown() {
const myTimeout = setTimeout(dropdownExecute, 1000);
}
function dropdownExecute() {
document.getElementById("dropdown").style.display = "block";
}
function us() {
document.getElementById("language").innerHTML = english;
document.getElementById("title").innerHTML = "My Website";
document.getElementById("heading").innerHTML = "Hello world!";
document.getElementById("sentence").innerHTML = "Look at my lovely picture!";
document.getElementById("label").innerHTML = "Description:";
document.getElementById("description").innerHTML = "It is a lovely picture who made Lorem ipsum, And this dummy text starts to be popular and famous since in the 1900's. The dummy text started like this "Lorem ipsum dolor amet". And in case you need to know, This is from Latin America (South america), From a Latin Langauge.";
document.getElementById("option").innerHTML = "I'm done Reading";
document.getElementById("dropdown").style.display = "none";
document.getElementById("flag").src = "data:image/png;base64,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";
}
function tagalog() {
document.getElementById("language").innerHTML = phillipines;
document.getElementById("title").innerHTML = "Aking website";
document.getElementById("heading").innerHTML = "Hello Mundo!";
document.getElementById("sentence").innerHTML = "Tingnan mo ang Lovely Picture ko!";
document.getElementById("label").innerHTML = "Paglalarawan:";
document.getElementById("description").innerHTML = "Ito ay isang magandang larawan na gumawa ng Lorem ipsum, At ang dummy na tekstong ito ay nagsimulang maging tanyag at sikat mula noong 1900's. Nagsimula ang dummy text na ganito "Lorem ipsum dolor amet". At kung sakaling kailangan mong malaman, Ito ay mula sa Latin America (South america), Mula sa isang Latin na Wika.";
document.getElementById("option").innerHTML = "Tapos na akong Magbasa";
document.getElementById("dropdown").style.display = "none";
document.getElementById("flag").src = "data:image/png;base64,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";
}
We are all done! Let's check the preview of our code/webpage!
Or the best of my project on Codepen.io!
That is all we know about How to make a language menu!
I really do love this website! Do you love it too?