MajorDoMo

Код: Выделить всё

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background-image: -webkit-radial-gradient(#ffffff, #708090);
  background-image: radial-gradient(#ffffff, #708090);
}

#button {
  font-family: sans-serif;
  position: absolute;
  width: 65px;
  height: 65px;
left: 70;
 top: -17;


  background-color: black;
  border-radius: 50%;
  color: white;
  text-align: center;
  cursor: pointer;
}
#button:before {
  content: "\2630";
  font-size: 40px;
}

.drop-down,
.drop-down + ul {
  -webkit-animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
          animation: drop 100ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}

.rise-up,
.rise-up + ul {
  -webkit-animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
          animation: rise 400ms forwards cubic-bezier(1, 0, 0.755, 1.47);
}

.rise-up + ul li {
  pointer-events: none;
}

.rise-up {
  z-index: 1;
}

li {
  z-index: -1;
  position: absolute;
  width: 75px;
  height: 75px;
  left: 50%;
  margin: -37.5px;
  list-style: none;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
  transition: -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
  transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
  transition: transform 300ms cubic-bezier(1, 0, 0.755, 1.47), -webkit-transform 300ms cubic-bezier(1, 0, 0.755, 1.47);
}
li:nth-child(1) {
  background-color: red;
}
.drop-down + ul li:nth-child(1) {
  -webkit-transform: translateX(0px) translateY(-100px);
          transform: translateX(0px) translateY(-100px);
}
li:nth-child(2) {
  background-color: #ffbf00;
}
.drop-down + ul li:nth-child(2) {
  -webkit-transform: translateX(70.71068px) translateY(-70.71068px);
          transform: translateX(70.71068px) translateY(-70.71068px);
}
li:nth-child(3) {
  background-color: #80ff00;
}
.drop-down + ul li:nth-child(3) {
  -webkit-transform: translateX(100px) translateY(0px);
          transform: translateX(100px) translateY(0px);
}
li:nth-child(4) {
  background-color: #00ff40;
}
.drop-down + ul li:nth-child(4) {
  -webkit-transform: translateX(70.71068px) translateY(70.71068px);
          transform: translateX(70.71068px) translateY(70.71068px);
}
li:nth-child(5) {
  background-color: cyan;
}
.drop-down + ul li:nth-child(5) {
  -webkit-transform: translateX(0px) translateY(100px);
          transform: translateX(0px) translateY(100px);
}
li:nth-child(6) {
  background-color: #0040ff;
}
.drop-down + ul li:nth-child(6) {
  -webkit-transform: translateX(-70.71068px) translateY(70.71068px);
          transform: translateX(-70.71068px) translateY(70.71068px);
}
li:nth-child(7) {
  background-color: #8000ff;
}
.drop-down + ul li:nth-child(7) {
  -webkit-transform: translateX(-100px) translateY(0px);
          transform: translateX(-100px) translateY(0px);
}
li:nth-child(8) {
  background-color: #ff00bf;
}
.drop-down + ul li:nth-child(8) {
  -webkit-transform: translateX(-70.71068px) translateY(-70.71068px);
          transform: translateX(-70.71068px) translateY(-70.71068px);
}

.selected {
  z-index: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

@-webkit-keyframes rise {
  from {
    -webkit-transform: translateY(00px);
            transform: translateY(00px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes rise {
  from {
    -webkit-transform: translateY(00px);
            transform: translateY(00px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes drop {
  to {
    -webkit-transform: translateY(00px);
            transform: translateY(00px);
  }
}
@keyframes drop {
  to {
    -webkit-transform: translateY(00px);
            transform: translateY(00px);
  }
}

Код: Выделить всё

<div id='button'></div>
<ul id='swatches'>  <li><a href='1'></a></li>  
 
 <li><a href='1'></a></li>  
 <li><a href='2'></a></li> 
 <li><a href='3'></a></li>  
 <li><a href='4'></a></li>
 <li><a href='5'></a></li> 
 <li><a href='6'></a></li>  
 <li><a href='7'></a></li></ul>
      
  <script>

  var button = document.getElementById('button'),
    drop = document.getElementsByClassName('drop-down')[0],
    rise = document.getElementsByClassName('rise-up')[0];
button.addEventListener('click', menuClick, false);
   
   
function menuClick(){
  if (button.classList.contains('drop-down')){
     button.classList.remove('drop-down');
     button.classList.add('rise-up');
   } else {
     button.classList.remove('rise-up');
     button.classList.add('drop-down');  
   }
}

var swatch = document.getElementById('swatches');

swatch.addEventListener('click', swatchMenu, false);
   

function swatchMenu(e){
  var target = e.target,
      selected = swatch.querySelector("li.selected");
   

  if(selected){
    selected.classList.remove('selected');
  } 
  
  if(target.nodeName.toLowerCase() === 'li'){
    target.classList.toggle('selected');
    button.classList.remove('drop-down');
    button.classList.add('rise-up');
  }
   

   
}  
//alarm(swatch.firstChild.nodeValue);
   alarm("123");
    
  </script>