POC Dropdown 20180403

Version 1.1: traduction

by ced1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


 <div id="div_lang_selector">
  <span id='flag-main' class="trn position-top position-right" data-trn-key="flag_main">
  <img src="http://[::1]/keylo_airport/assets/img/flag_en.png" class="img-rounded flag\" alt="EN"> "
  <img src="http://[::1]/keylo_airport/assets/img/flag_fr.png" class="img-rounded flag\" alt="FR"> ",
      zh: "<img src="http://[::1]/keylo_airport/assets/img/flag_zh.png" class="img-rounded flag" alt="ZH">
   
  </span>  

  <br/>

  <span id='flag-hover' class="trn" data-trn-key="flag_hover">
  </span>  
</div>

CSS

/* CSS flags homepage */

.flag{
  width:60px;
  height: 45px;
  /*float: right;*/
}

#flag-hover {
    display: none;
}

.flagtop{
  position: fixed;
  right: 100px;
  top: 75px;
}

.flagbottom{
  position: fixed;
  right: 100px;
  top: 130px;
}

.position-right {
    position: fixed;
    right: 100px;
}

.position-top {
    position: fixed;
    top: 20px;
}

JavaScript

$(document).ready(function(){
   $("#flag-main").click(function () {
      $("#flag-hover").stop().slideToggle();
     return false;
   });

   $("#flag-main").hover(function () {
       $(this).stop().css({
           "cursor": "pointer"
       })
   });
});