Google translation buttons

  • I’ve used the google translate tools that creates a dropdown of languages. Is there a way I can emulate this functionality, but instead of a dropdown create actual buttons for single languages? Meaning if I have german and french, instead of having a dropdown with two languages, I have two buttons that when clicked change the language?

    I am looking for an auto-translation vs something like WPML because I won’t be translating content myself. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • HTML

    <button class="language_selector">Choose Language</button>
<ul class="languages">
    <li><a href="/en">English</a></li>
    <li><a href="/de">Deutsch</a></li>
</ul>

<article>
    <h1>More Content</h1>
</article>
JavaScript

var trigger = $('.language_selector');
var list = $('.languages');

trigger.click(function() {
    trigger.toggleClass('active');
    list.slideToggle(200);
});

// this is optional to close the list while the new page is loading
list.click(function() {
    trigger.click();
});
CSS

.language_selector {
    width: 200px;
    background: #222;
    color:  #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

.languages {
    display: none;
    position: absolute;
    margin: 0;
    background: #dddddd;
}

.languages > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

.languages > li:hover {
    background: #aaa;
}

    you can consult this code which my friends suggest me. Good luck!

    Thread Starter navyspitfire

    (@navyspitfire)

    @kaylynny – looking at that code it appears that it will still be a dropdown since they are list items? I am trying to make it so each language is simply a button you click; not dropdown functionality whatsoever. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Google translation buttons’ is closed to new replies.

Tags