自定义翻译下拉菜单

Question

我需要在网页上为我的学校作业提供翻译功能。现在，我已经使用Google API完成输出。

但是我对结果不满意。

我想用几种语言代替所有语言。

我想将翻译链接到自定义链接上。     就像是Boodstrap下拉菜单。

还是我应该重新考虑其他选择？

我玩过Google API。

function googleTranslateElementInit(){
    new google.translate.TranslateElement({pageLanguage: 'nl'}, 'Translator_language_selector')
}

<!-- stoart of the translate module -->
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/src/public/scripts/app_translator.js"></script>
    <!-- End of the translate module -->
    

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    NL
    </a>
    <div id="Translator_language_selector"></div>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="?lang=nl">nl</a>
        <a class="dropdown-item" href="?lang=en">En</a>
        <a class="dropdown-item" href="?lang=fr">Fr</a>
        <a class="dropdown-item" href="?lang=de">De</a>
    </div>
</li>