<li class="dropdown">
<a href="#" id="language-button">
<img src="[Link] alt="Français" style="height:
20px; vertical-align: middle;">
</a>
<ul class="dropdown-menu">
<li><a href="#" onclick="translatePage('en')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('es')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('de')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('it')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('pt')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('zh-CN')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('ar')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('ru')"><img
src="[Link] style="height: 20px;"></a></li>
<li><a href="#" onclick="translatePage('ja')"><img
src="[Link] style="height: 20px;"></a></li>
</ul>
</li>
<!-- Conteneur caché pour Google Translate -->
<div id="google_translate_element" style="display: none;"></div>
<script>
function googleTranslateElementInit() {
new [Link]({ pageLanguage: 'fr' },
'google_translate_element');
}
function translatePage(lang) {
if (![Link](".goog-te-combo")) {
// Charger le script Google Translate si ce n'est pas déjà fait
var googleScript = [Link]('script');
[Link] = "//[Link]/translate_a/[Link]?
cb=googleTranslateElementInit";
[Link](googleScript);
setTimeout(() => changeLanguage(lang), 1000);
} else {
changeLanguage(lang);
}
}
function changeLanguage(lang) {
var select = [Link](".goog-te-combo");
if (select) {
[Link] = lang;
[Link](new Event("change"));
}
}
[Link]("DOMContentLoaded", function() {
let observer = new MutationObserver(() => {
let translateBar = [Link]("[Link]");
if (translateBar) {
[Link] = "none";
[Link] = "0px";
}
});
[Link]([Link], { childList: true, subtree: true });
});
</script>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
padding: 10px;
list-style: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
padding: 5px 0;
}
.dropdown-menu a {
text-decoration: none;
color: black;
}
.menu {
display: flex;
justify-content: flex-start; /* Alignement des éléments à gauche */
align-items: center;
padding: 90px;
}
.menu-item {
position: relative;
text-align: center;
margin-right: 40px; /* Réduction de l'espace au minimum */
}
.dropdown {
position: relative;
display: inline-block;
margin-left: -90px; /* Réduction maximale de l'espace */
}
.dropdown-menu {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
padding: 5px; /* Réduction de l'espace intérieur */
list-style: none;
width: 30px; /* Réduction de la largeur du menu déroulant */
left: 0;
z-index: 1000; /* S'assurer qu'il apparaît au-dessus */
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
padding: 3px 0; /* Réduction de l'espacement des éléments */
text-align: center; /* Centrer les drapeaux */
}
.dropdown-menu a {
text-decoration: none;
color: black;
display: block;
}
.dropdown-menu img {
height: 16px; /* Réduction de la taille des drapeaux */
}
</style>