ホームページ  >  記事  >  ウェブフロントエンド  >  ドロップダウン メニューと CSS スタイルを使用して Google 翻訳をウェブサイトに統合するにはどうすればよいですか?

ドロップダウン メニューと CSS スタイルを使用して Google 翻訳をウェブサイトに統合するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-01 05:39:02921ブラウズ

How can I integrate Google Translate into my website with a dropdown menu and CSS styling?

Web サイトへの Google 翻訳の統合

この質問は、提供されているさまざまなコード スニペットを使用して Google 翻訳を Web サイトに組み込むことを中心に展開しています。最初のコード スニペットは基本的な実装を提供しますが、CSS と言語選択用のドロップダウン メニューを使用してスタイルを設定する機能がありません。一方、2 番目のコード スニペットにはドロップダウン メニューが含まれていますが、ライブ サイトに貼り付けると動作しません。

解決策は、両方のコード スニペットを機能実装に組み合わせることにあります。必要な要素を含む修正されたマークアップは次のとおりです。

<code class="html"><div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'en'
        }, 'google_translate_element');
    }
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></code>

このコードには、最初のスニペットの基本機能と 2 番目のスニペットのドロップダウン メニュー マークアップの両方が組み込まれています。 Google 翻訳をウェブサイトに組み込み、CSS を使用して外観をカスタマイズできるようになります。

以上がドロップダウン メニューと CSS スタイルを使用して Google 翻訳をウェブサイトに統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。