Javascript-форум - Показать сообщение отдельно

рони · #6 (**permalink**) 25.10.2015, 12:14

gorbuz9kin,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(img/flag_english_active.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(img/flag_russion.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(img/flag_ukraine.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') titleElem.innerHTML = elem.textContent;
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>