Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to be the default language when visitors first enter my site, but they should have the option to choose a different language from the list. To see examples of the code in action, please check out these two code pens:
<div class="languages">
<a href="#" onclick="doGTranslate('en|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="images/english.png" height="16" width="16" alt="English" /></a>
<a href="#" onclick="doGTranslate('en|fr');return false;" title="French" class="gflag nturl" style="background-position:-200px -100px;"><img src="images/france.png" height="16" width="16" alt="French" /></a>
<a href="#" onclick="doGTranslate('en|de');return false;" title="German" class="gflag nturl" style="background-position:-300px -100px;"><img src="images/germany.png" height="16" width="16" alt="German" /></a>
<a href="#" onclick="doGTranslate('en|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="images/italy.png" height="16" width="16" alt="Italian" /></a>
<div id="google_translate_element2"></div>
</div>