dropdown

by gotwo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
jhgjhgjhg
<dl id="source" class="dropdown">
   <dt value="IN">India</dt>
   <dd value="BR">Brasil</dd>
   <dd value="FR">France</dd>
   <dd value="DE">Germany</dd>
   <dd value="JP">Japan</dd>
   <dd value="RS">Serbia</dd>
</dl>
ggggg

CSS

body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.desc { color:#6b6b6b;}
        
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown {cursor1:default; display1:block;}
.dropdown a {cursor:default}
.dropdown dd {
  background:#e4dfcb none repeat scroll 0 0;
  color: #111; 
  display:none;
  left: 0px; 
  padding: 5px 0px;
  line-height:14px;
  top: 2px; 
  width: 333px; 
  list-style: none;
}
.dropdown span.value {
  display:none;}
.dropdown dd:hover, .dropdown-hover {
  background-color:#d0c9af;
  background-position: 100% -16px;
}
.dd-text {
  padding-left: 22px;
}
.dropdown a, .dropdown:link {
  color:inherit;
  cursor1: inherit;
}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

.icon-setting {
  background-repeat:     no-repeat;
  background-position:   100% 0px;
  background-size:       auto;
  background-attachment: scroll;
  background-clip:       border-box;
  background-color:      transparent;
  background-image:      url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12' height='48'><defs><circle id='a' cx='6' cy='6' r='5' stroke-width='2' fill='none'/><circle id='b' cx='6' cy='6' r='1' stroke-width='2' fill='black'/></defs><use xlink:href='%23a' stroke='%23888'/><use xlink:href='%23a' stroke='%23555' transform='translate(0 12)'/><use xlink:href='%23a' stroke='%238BD' transform='translate(0 24)'/><use xlink:href='%23a' stroke='%23369' transform='translate(0 36)'/><use xlink:href='%23b' stroke='%23888'/><use xlink:href='%23b' stroke='%23555' transform='translate(0 12)'/><use xlink:href='%23b' stroke='%238BD' transform='translate(0 24)'/><use xlink:href='%23b' stroke='%23369' transform='translate(0 36)'/></svg>");
  text-decoration:       none;
  display:               block;
  height:               ...

JavaScript

$(document).ready(function() {

  $(".dropdown dd").wrapInner('<a class="icon-setting" href="#"><span class="dd-text"></span></a>');
  
  $(".dropdown dt").click(function() {
    $(".dropdown dd").slideToggle();     // show/hide elements
  });

  // extend the click event to click somewhere
  $(document).bind('click', function(e) {
    var o = $(e.target);
    if (! o.parents().hasClass("dropdown"))
      $(".dropdown dd").slideUp();
  });

  // element is selected
  $(".dropdown dd").click(function() {
    var sText = $(this).text();
    $(".dropdown dt").html(sText);
    $(".dropdown dd").slideUp();
  });

  // over the element
  $(".dropdown dd").hover(
    function(){
      $(this).addClass("dropdown-hover");
      $("a", this).addClass("icon-setting-hover");
    },  // if not hover
    function(){
      $(this).removeClass("dropdown-hover");
      $("a", this).removeClass("icon-setting-hover");
  });

});